從兩個文本框輸入兩個手柄的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滑塊？

回答

相關問題