Question

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

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

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

ie - 当我有#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（“刷新”）没有用，但我弄清楚发生了什么。

我包括：

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

就在前面：

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

我确信有更好的方法来写这个，但它有效。请注意，必须在滑块值之前声明max。我忘了的另一件事是“选项”部分，这很重要。

完整代码：

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 Slider更新滑块最大值

1 个答案: