Question

我想使用Jquery创建一组类似于体积的滑块。这是类比，假设我有n个滑块（垂直或水平）。我希望调整滑块的效果会影响其他滑块。

禁令是滑块值的总和必须始终为100％。因此，如果一个滑块设置为40％，则其他滑块的累积总和不能超过60％。

这意味着每个滑块的所有输出之和必须总和为100％，并且它们必须协同工作。这意味着如果设置了一个滑块，则必须在视觉上约束其他滑块超出其限制，以确保满足约束。

我已经知道如何使用Jquery制作滑块，所以请帮我弄清楚如何以合作的方式做一些滑块。

这是我到目前为止所做的，我只想出了如何做滑块。

    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery-ui-1.10.4.js"></script>


        <div id="control1">
            <label for="amount">Set Co-occurence threshold</label>
            <input type="text" id="amount" class="sliderClass">
            <br/>
            <div id="slider-range-max" class="sliderControl"></div>
        </div>

        $( "#slider-range-max" ).slider({
                range: "max",
                min: 0,
                max: 100,
                value: 1,
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.value );
                }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ));

Answer 1

这个怎么样：

<div id="control1">
    <label for="amount">Set Co-occurence threshold</label>
    <input type="text" id="amount" class="sliderClass">
    <br/>
    <div id="slider-range-max" class="sliderControl"></div>
    <div id="slider-range-max2" class="sliderControl"></div>
</div>

Jquery的：

$( ".sliderControl" ).slider({
    range: "max",
    min: 0,
    max: 100,
    value: 0,
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        $(".sliderControl").not($(this)).slider("option", "value", 100 - ui.value);
    }
});


$(".sliderControl").first().slider("option", "value", 100); //Make sure the first slider is the max of the sliders, the rest is 0.

$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ));

JSFiddle：http://jsfiddle.net/U4WD7/2/

在jquery中一起工作的一组音量滑块

1 个答案: