jquery UI Slider on click update the slider max value

Question

I have an input box and then a slider. It is set up so that if the user puts a number in the input box, it will change the value of the handle of the slider. If the user drags the handle then it updates the value of the input box.

I also need to make it so that if the user clicks on one div, it is in kg and the other div changes the number to lb. I have it now so that the number in the input box and the handle changes position to the new number.

My issue is the max value of the slider. If the div #lb is selected, it should be max: 100 and if #kg is selected it should be 45. Right now it doesn't update so the value is always 100.

ie - when I have the click function for #lb or #kg, the sliderVal isn't updating on the slider.

Code:

var kg = 0.45359237
var sliderVal = 100

$("#lb").click(function() {
    $("#inputBox").val(  Math.round( $("#inputBox").val()/kg) )
    var sliderVal = 100      
    $("#mySlider").slider("value" , $('#inputBox').val());
});
$("#kg").click(function() {
    $("#inputBox").val( Math.round( $("#payload").val()*kg) )
    var sliderVal = 45
    $("#mySlider").slider("value" , $('#inputBox').val()) 
});


$( "#payloadSlider" ).slider({
    range: "min",
    min: 0,
    max: sliderVal,
    slide: function( event, ui ) {
    $( "#inputBox" ).val( ui.value );
    $(ui.value).val($('#inputBox').val());
    }
});

$("#inputBox").keyup(function() {
    $("#mySlider").slider("value" , $(this).val())
});   

I have tried things like the following example but it still isn't updating.

$("#mySlider").slider("value" , $('#inputBox').val()).refresh();

var lbVal = Math.round( $("#payload").val()/kg)
$("#payload").val( lbVal )
$("#mySlider").prop({max: sliderVal,value: lbVal}).slider("refresh"); 

Thanks!!

Answer 1

The .slider("refresh") wasn't working but I figured out what was going on.

I included:

$("#mySlider").slider("option", "max" , sliderVal );

right in front of:

$("#mySlider").slider("value" , $('#inputBox').val());

I am sure there is a better way to write this but it works. Note that the max must be declared before the slider value. Another thing I forgot was the "option" part which is important to have.

Full Code:

var kg = 0.45359237
var sliderVal = 100

$("#lb").click(function() {
    $("#inputBox").val(  Math.round( $("#inputBox").val()/kg) )
    var sliderVal = 100   
    $("#mySlider").slider("option", "max" , sliderVal );   
    $("#mySlider").slider("value" , $('#inputBox').val());
});
$("#kg").click(function() {
    $("#inputBox").val( Math.round( $("#payload").val()*kg) )
    var sliderVal = 45
    $("#mySlider").slider("option", "max" , sliderVal );
    $("#mySlider").slider("value" , $('#inputBox').val()) 
});


$( "#payloadSlider" ).slider({
    range: "min",
    min: 0,
    max: sliderVal,
    slide: function( event, ui ) {
    $( "#inputBox" ).val( ui.value );
    $(ui.value).val($('#inputBox').val());
    }
});

$("#inputBox").keyup(function() {
    $("#mySlider").slider("value" , $(this).val())
});