从两个文本框输入两个手柄的JQuery UI滑块？

我需要一个jQuery滑块有两个把手与输入来自两个文本框这样http://www.israel-diamonds.com/search/diamonds/default.aspx。目前我有一个手柄滑块与输入从单一的文本框从两个文本框输入两个手柄的JQuery UI滑块？

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

来源

2012-02-28 bala3569

不幸的是，多个滑块手柄是用'范围不兼容： “分钟”'选项。是否有可能放弃该选项？ – 2012-02-28 11:46:22

@FrédéricHamidi：是的，这只是一个样本 – bala3569 2012-02-28 11:47:35

你到底有什么问题？ – 2012-02-28 13:19:23

假设你有两个<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结果。

来源

2012-02-28 13:25:20

：谢谢，但句柄重叠 – bala3569 2012-02-28 13:40:51

确实，您可以指定'range：true'选项来禁止此行为。更新小提琴[这里]（http://jsfiddle.net/FPCRb/1/）。 – 2012-02-28 13:44:02

此代码与masterpage正常工作，但我编辑部分中的代码返回'/ Slid'应用程序中的错误服务器错误。该页面的状态信息无效，可能已损坏。 – bala3569 2012-02-29 09:53:27

来自官方的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>

来源

2017-06-27 18:15:12 georgecodes

从两个文本框输入两个手柄的JQuery UI滑块？

回答

相关问题