7

このhttp://www.israel-diamonds.com/search/diamonds/default.aspxのような2つのテキストボックスからの入力を持つ2つのハンドルを持つjqueryスライダーが必要です。現在、単一のテキストボックスからの入力を持つ単一のハンドルスライダーがあります

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

2 に答える 2

15

<input>2つの要素があると仮定します。

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

このフィドルで結果を見ることができます。

于 2012-02-28T13:25:20.567 に答える