jquery - jQuery Slider Bar 选择两个依赖值

Question

我需要一些关于在 jquery 中制作滑块或缩放的帮助。有两个值将由滑块确定。甜和盐的量。他们将是滑块上的一个按钮来滑动。当滑块在 30% 时，其他值应为 70%。即总和应始终为 100%。

我怎么能做这样的滑块？我看过 jQuery Slider 插件，但它没有这样的选项。我也用谷歌搜索过，但找不到这种滑块的例子。

Answer 1

这是执行此类操作的一般方法（如果需要，将创建一个示例）：

1. 创建两个滑块。
2. 在 jQuery 中，订阅两个滑块的“更改”事件。
3. 如果一个滑块发生变化，则将另一个滑块的值设置为100-thisSliderPercent。

因此，如果一个被拖动，另一个响应。

这是一个带有示例的 jsFiddle。

$("#slider1").slider({
    min: 0,
    max: 100,
    value: 100,
    slide: function (event, ui) {
        $("#slider2").slider("value", 100 - ui.value);
    }
});
$("#slider2").slider({
    min: 0,
    max: 100,
    slide: function (event, ui) {
        $("#slider1").slider("value", 100 - ui.value);
    }
});

<div id="slider1"></div><br/><div id="slider2"></div>

Answer 2

jQuery UI 滑块可用于执行此操作

HTML：

<div id="slider"></div>
Sweet:<div id="sweet">0</div>
Salt:<div id="salt">100</div>

JS：

$(function() {
    $( "#slider" ).slider({
        slide: function(event, ui) {
            $('#sweet').text(ui.value);
            $('#salt').text(100 - ui.value);
        }
    });
});

小提琴