I'm using the jQuery UI slider for a casino game project I am working on. I need to be able to change the "max" value based upon the players current bankroll. At first, the slider works correctly, it sets the "max" slider value to 1000, the players starting bankroll. Bust as the 'currentBankroll' variable changes, the sliders "max" value does not update. I inserted a console.log() line of code to check the value of the variable 'currentBankroll', which confirms the value is changing, but the slider "max" value stays at the initial value of 1000 and does not update. To further confuse me, I tried a solution I found here to change the "max" value.

$('#slider-range-max2').slider("option", "max", 300);

This line of code will change the sliders "max" value if I put a number in it (like 300), but will not work if I use a variable (like 'currentBankroll"). How can I change the sliders value using a variable?

$(function() {
    console.log("Current Bankroll: " + currentBankroll);
    $("#slider-range-max2").slider({
        range: "max",
        max: 0,
        min: 1,
        max: currentBankroll,
        value: 2,
        slide: function( event, ui ) {
            $("#amount").val( ui.value );
            sliderValue = (ui.value);
        },
        slide : function(event, ui) {
            skillLevelSlots(ui.value);
            wagerAmount = (ui.value);
            $('.wager').html("$" + wagerAmount);
        }
    });
    $('#slider-range-max2').slider("option", "max", 300);
});

I'm using the jQuery UI slider for a casino game project I am working on. I need to be able to change the "max" value based upon the players current bankroll. At first, the slider works correctly, it sets the "max" slider value to 1000, the players starting bankroll. Bust as the 'currentBankroll' variable changes, the sliders "max" value does not update. I inserted a console.log() line of code to check the value of the variable 'currentBankroll', which confirms the value is changing, but the slider "max" value stays at the initial value of 1000 and does not update. To further confuse me, I tried a solution I found here to change the "max" value.

$('#slider-range-max2').slider("option", "max", 300);

This line of code will change the sliders "max" value if I put a number in it (like 300), but will not work if I use a variable (like 'currentBankroll"). How can I change the sliders value using a variable?

$(function() {
    console.log("Current Bankroll: " + currentBankroll);
    $("#slider-range-max2").slider({
        range: "max",
        max: 0,
        min: 1,
        max: currentBankroll,
        value: 2,
        slide: function( event, ui ) {
            $("#amount").val( ui.value );
            sliderValue = (ui.value);
        },
        slide : function(event, ui) {
            skillLevelSlots(ui.value);
            wagerAmount = (ui.value);
            $('.wager').html("$" + wagerAmount);
        }
    });
    $('#slider-range-max2').slider("option", "max", 300);
});

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Dec 12, 2014 at 14:47 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Dec 12, 2014 at 14:43 PixelPaulPixelPaul 2,80144 gold badges4747 silver badges8282 bronze badges 4

• have you tried $('#slider-range-max2').slider("option", "max", parseInt(currentBankroll)); – Craicerjack Commented Dec 12, 2014 at 14:47
• You have defined the slide property twice, which will cause problems. – Rory McCrossan Commented Dec 12, 2014 at 14:48
• I tried the 'parseInt', but that did not work. – PixelPaul Commented Dec 12, 2014 at 14:53
• var c = 5; $('#slider-range-min').slider("option", "max", c); - I just tested this in my own code and it seems to work fine. Like @RoryMcCrossan said you have slide() defined twice, but other than that I dont see why the code above isnt working. Are you getting any errors? – Craicerjack Commented Dec 12, 2014 at 15:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Right - you are defining your slider at a certain time and using currentBankroll to set max value. This is the value when the slider is created but this doesnt change unless you re create it. To get it to change, whenever your currentBankroll changes you could call a function that changes the value.

function currentBankrollChange(currentBankroll){
     $('#slider-range-max2').slider("option", "max", currentBankroll);
}

or when a players bankroll changes you could call:

 $('#slider-range-max2').slider("option", "max", currentBankroll);