jquery UI Slider 单击更新 slider 最大值

Question

我有一个输入框和一个 slider 。它的设置是为了如果用户在输入框中输入数字，它将更改 slider handle 的值。如果用户拖动 handle ，则会更新输入框的值。

我还需要这样做，以便如果用户单击一个div，它的单位是kg，而另一个div将数字更改为lb。我现在有了它，以便输入框中的数字和 handle 改变位置到新号码。

我的问题是 slider 的最大值。如果选择 div #lb，则最大值应为:100；如果选择 #kg，则应为 45。现在它不会更新，因此该值始终为 100。

ie - 当我有 #lb 或 #kg 的点击功能时， slider Val 不会在 slider 上更新。

代码:

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())
});   

我已经尝试过类似以下示例的操作，但它仍然没有更新。

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

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

谢谢!!

Answer 1

.slider("refresh") 不起作用，但我弄清楚发生了什么。

我包括:

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

就在前面:

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

我确信有更好的方法来编写它，但它确实有效。请注意，最大值必须在 slider 值之前声明。我忘记的另一件事是“选项”部分，它很重要。

完整代码:

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())
});