根据 jQuery UI 滑块的位置和值更新其他值

Question

我正在使用 jQuery 构建一个基本的抵押贷款计算器，需要显示一些根据滑块的当前值动态变化的值。

这些值是基本数学，例如显示当前滑块值的百分比或显示当前滑块值的两倍。

这是我使用 jQuery 的地方，我想我需要以某种方式对最后三行执行一些数学运算以获得正确的值并将它们显示在 HTML 元素中。

HTML:

<div id="slider"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
<p>Double the slider value is <span id="slider-double"></span></p>
<p>10% of the slider value is <span id="slider-percent"></span></p>

jQuery:

$("#slider").slider({
value: 100,
min: 0,
max: 1000,
step: 1,
 slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});

$("#slider-value").html($('#slider').slider('value'));
$("#slider-double").html($('#slider').slider('value'));
$("#slider-percent").html($('#slider').slider('value'));

我正在这里处理，其中还显示 html：https://jsfiddle.net/chlorinekid/mwydgj82/6/

有什么想法吗？非常感谢。

Answer 1

我想你正在寻找这样的东西：

    $("#slider").slider({
        value: 100,
        min: 0,
        max: 1000,
        step: 1,
        slide: function(event, ui) {
            $("#slider-value").html(ui.value);
            $("#slider-double").html(ui.value*2 + " double");
            $("#slider-percent").html(ui.value/10 + "%");
        }
    });

    $("#slider-value").html($('#slider').slider('value'));
    $("#slider-double").html($('#slider').slider('value')*2 + " double");
    $("#slider-percent").html($('#slider').slider('value')/10 + "%");

Answer 2

If you want to update slider affected values when slider value is chosen (when slider is released)

为了在滑块中保留先前设置的值，必须使用滑块的 change 事件。

$('#slider').slider({
    change: function(event, ui) {
      updateSliderDouble(ui.value);
      updateSliderPercent(ui.value);
    }
});

请参考我的fiddle例子 http://jsfiddle.net/mwydgj82/29/

If you want to update slider affected values while slider is moving

在这种情况下，必须使用滑块的 slide 事件。

$("#slider").slider({
    value: 100,
    min: 0,
    max: 1000,
    step: 1,
    slide: function(event, ui) {
        $("#slider-value").html(ui.value);
        updateSliderDouble(ui.value);
        updateSliderPercent(ui.value);
    }
});

请参考我的fiddle例子 http://jsfiddle.net/9ousgtyd/1/

根据 jQuery UI 滑块的位置和值更新其他值

Update other values based on position and value of jQuery UI slider

jquery

jquery-ui

jquery-ui-slider