Jquery UI滑块有两个句柄,两个文本框输入？

Question

我需要一个带有两个手柄的jquery滑块,其中包含来自两个文本框的输入,如http://www.israel-diamonds.com/search/diamonds/default.aspx.目前我有一个单手柄滑块,单个文本框输入

$("#slider").slider({
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function(event, ui) {
        $("input").val("$" + ui.value);
    }
});
$("input").change(function () {
    var value = this.value.substring(1);
    console.log(value);
    $("#slider").slider("value", parseInt(value));
});

有什么建议吗？

编辑:

<div class="demo">
    <input type="text" class="sliderValue"  />
        <p>
        </p>
        <div id="slider"></div>
    </div>

和

  $("#slider").slider({
        range: "min",
        value: 1,
        step: 10,
        min: 0,
        max: 1000,
        slide: function (event, ui) {
            $("input").val(ui.value);
        }
    });


    $("input").change(function (event) {
        var value1 = parseFloat($("input").val());
        var highVal = value1 * 2;
        $("#slider").slider("option", { "max": highVal, "value": value1 });
    });

Answer 1

假设你有两个<input>要素:

<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />

还有一个滑块占位符元素:

<div id="slider"></div>

您可以使用该values选项将滑块窗口小部件置于多个句柄模式,并将<input>元素的值与以下内容同步:

$("#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());
});

你可以在这个小提琴中看到结果.