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

【问题标题】：Update other values based on position and value of jQuery UI slider根据 jQuery UI 滑块的位置和值更新其他值
【发布时间】：2017-08-30 23:11:24
【问题描述】：

我正在使用 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/

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-slider

【解决方案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 + "%");

【讨论】：

这似乎可行，谢谢。有没有办法让'slider-double'和'slider-percent'反映滑块的初始值（在本例中为'100'），而不是仅在滑块移动时更新？ jsfiddle.net/chlorinekid/mwydgj82/22
请再看我的回答。
非常感谢。我需要的一项附加功能是显示“剩余”值。这将显示 value1 minus value2 minus value3 的结果。对此有什么想法吗？我假设我需要以某种方式分配变量以便从另一个中减去一个。
你可以使用这样的东西：$("#slider-value").html(100 - ui.value);

【解决方案2】：

如果您想在选择滑块值时（释放滑块时）更新滑块影响值

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

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

请参考我的小提琴示例 http://jsfiddle.net/mwydgj82/29/

如果您想在滑块移动时更新滑块影响的值

在这种情况下，必须使用滑块的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);
    }
});

请参考我的小提琴示例 http://jsfiddle.net/9ousgtyd/1/

【讨论】：