jquery UI 单击滑块更新滑块最大值

Question

我有一个输入框，然后是一个滑块。它被设置为如果用户在输入框中输入一个数字，它将改变滑块句柄的值。如果用户拖动手柄，则它会更新输入框的值。

我还需要这样做，如果用户点击一个 div，它以公斤为单位，另一个 div 将数字更改为磅。我现在有了它，以便输入框中的数字和句柄更改位置到新数字。

我的问题是滑块的最大值。如果选择了 div #lb，它应该是最大值：100，如果选择了 #kg，它应该是 45。现在它不会更新，所以值总是 100。

即 - 当我有 #lb 或 #kg 的点击功能时，滑块上的 sliderVal 没有更新。

代码：

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

我相信有更好的写法，但它确实有效。请注意，最大值必须在滑块值之前声明。我忘记的另一件事是 "option" 部分，它很重要。

完整代码：

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

jquery UI 单击滑块更新滑块最大值

jquery UI Slider on click update the slider max value

jquery

jquery-ui

uislider