Question

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

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

Answer 1

以下是执行此类操作的常规方法（如果需要，将创建示例）：

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

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

Here是一个带示例的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);
        }
    });
});

Fiddle

jQuery Slider Bar选择两个相关值

2 个答案: