带有两个句柄的 Jquery UI 滑块和来自两个文本框的输入？答案

【问题标题】：Jquery UI slider with two handles with input from two text box?带有两个句柄的 Jquery UI 滑块和来自两个文本框的输入？
【发布时间】：2012-02-28 10:13:52
【问题描述】：

我需要一个带有两个句柄的 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 });
    });

【问题讨论】：

不幸的是，多个滑块句柄与range: "min" 选项不兼容。是否可以放弃该选项？
@FrédéricHamidi：是的，这只是一个示例
你到底有什么问题？

标签： jquery jquery-ui jquery-ui-slider

【解决方案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());
});

你可以在this fiddle看到结果。

【讨论】：

：谢谢，但句柄重叠
确实如此，您可以指定range: true 选项来禁止此行为。更新小提琴here.
此代码在母版页上运行良好，但我的 EDIT 部分中的代码在“/Slid”应用程序中返回错误服务器错误。此页面的状态信息无效，可能已损坏。
这看起来像是一个视图状态问题，我不认为 jQuery UI 与该问题有关。你在修补__VIEWSTATE 隐藏的输入元素吗？有关类似问题及其解决方案，另请参阅 social.msdn.microsoft.com/Forums/sv-SE/netfxbcl/thread/…。
嘿 Frédéric Hamidi - 我用了你的答案，效果最好。但是当我在页面上有多个滑块时，我真的面临一个问题。当我添加多个滑块时 - 如果我更改第一个句柄，它还会将该滑块的第二个句柄设置为某个旧值。是否像数据索引问题，因为我的所有输入框都有数据索引 0 和 1。

【解决方案2】：

来自官方 jQuery UI 文档：https://jqueryui.com/slider/#range

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>

    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range"></div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
        $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
        } );
    </script>

</body>
</html>

【讨论】：