jquery UI Slider при щелчке обновить максимальное значение слайдера

Question

У меня есть поле ввода, а затем ползунок. Он настроен так, что если пользователь помещает номер в поле ввода, он изменит значение дескриптора ползунка. Если пользователь перетаскивает дескриптор, он обновляет значение поля ввода.

Мне также нужно сделать так, чтобы, если пользователь нажимает на один div, он находится в килограммах, а другой div меняет число на фунт. Теперь у меня есть это, чтобы число в поле ввода и ручке менялось позиция к новому номеру.

Моя проблема - максимальное значение ползунка. Если выбран div #lb, он должен быть максимальным: 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 ("refresh") не работал, но я понял, что происходит.

Я включил:

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