javascript - 如何创建一个带有两个手柄并同时防止重叠的滑块？

Question

我想要一个滑块，它在拖动时会改变输入框的值，但是当手动将值输入输入框时，滑块也会反映这一点。

<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" />
        <input type="text" class="sliderValue" data-index="1" value="90" />
    </div>
    <br />
    <div id="slider"></div>
</form>

$(document).ready(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10, 90],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});

像这样：http: //jsfiddle.net/FPCRb/

但是我需要滑块的处理程序在它们被相互拖入时相互反弹。换句话说，正确的处理程序不应该能够到处理程序的左侧。

Answer 1

链接：http: //jsfiddle.net/FPCRb/1096/

$(document).ready(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10, 90],
        slide: function(event, ui) {
            if ( ui.values[0] >= ui.values[1] ) {
                return false;
            } else {
                for (var i = 0; i < ui.values.length; ++i) {
                    $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
                }
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});