带有两个句柄的jQuery UI滑块，带有两个文本框的输入? [英] Jquery UI slider with two handles with input from two text box?

问题描述

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

I need a jquery slider with two handles with inputs from two textbox like this http://www.israel-diamonds.com/search/diamonds/default.aspx .Currently i have a single handle slider with input from a single textbox

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

推荐答案

假定您有两个<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>元素的值与:

You can use the values option to put the slider widget in multiple handle mode, and synchronize the values of the <input> elements with:

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

您可以在此小提琴中查看结果.

这篇关于带有两个句柄的jQuery UI滑块，带有两个文本框的输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！