具有兩個值（最小值和最大值）範圍的Seekbar

我正在進行搜索功能。我需要用seekbar選擇最小价格和最大價格。我在谷歌搜索了很多，但我發現seekbar有一個value.Below是我得到的代碼。具有兩個值（最小值和最大值）範圍的Seekbar

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
    <style type="text/css"> 
 
    #slider { margin: 10px; } 
 
    </style> 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#slider").slider(
 
      { 
 
       min: 0, 
 
       max: 100, 
 
       step: 1, 
 
       change: showValue 
 

 
      }); 
 
      $("#update").click(function() { 
 
       $("#slider").slider("option", "value", $("#seekTo").val()); 
 

 
      }); 
 
      function showValue(event, ui) { 
 
       $("#val").html(ui.value); 
 
      } 
 
     }); 
 
    </script> 
 
</head> 
 
<body style="font-size:62.5%;"> 
 
    <p> 
 
    The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys. 
 
    </p> 
 
    <p> 
 
    This sample demonstrates the simple usage of the slider seek to function. 
 
    For more information about slider, please procedd to http://docs.jquery.com/UI/Slider 
 
    </p> 
 
<div id="slider"></div> 
 
Seek To : <input id="seekTo" type="text" value="10" /> 
 
<input id="update" type="button" value="Update" /> 
 
Current Value : <span id="val">0</span> 
 
</body> 
 
</html>

有人幫助我如何兼得分鐘，並用單杆最高值..

我工作的PHP網站。如果您有任何PHP示例代碼，這將是有幫助的..

附加一：

還有一個疑問，如果這不是值的範圍，如果它像一個A + B B + C C + ...我們怎樣才能把它們放在這種類型的搜索欄中..

來源

2014-11-21 Phani

使用range: true選項！

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
    <style type="text/css"> 
 
    #slider { margin: 10px; } 
 
    </style> 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#slider").slider(
 
      { 
 
       range: true, 
 
       min: 0, 
 
       max: 100, 
 
       step: 1, 
 
       values: [10, 50], 
 
       change: showValue 
 
      }); 
 
      $("#update").click(function() { 
 
       $("#slider").slider("option", "values", [$("#seekTo1").val(), $("#seekTo2").val()]); 
 

 
      }); 
 
      function showValue(event, ui) { 
 
       $("#val").html(ui.values[0] + " - " + ui.values[1]); 
 
      } 
 
     }); 
 
    </script> 
 
</head> 
 
<body style="font-size:62.5%;"> 
 
    <p> 
 
    The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys. 
 
    </p> 
 
    <p> 
 
    This sample demonstrates the simple usage of the slider seek to function. 
 
    For more information about slider, please proceed to http://docs.jquery.com/UI/Slider 
 
    </p> 
 
<div id="slider"></div> 
 
Seek To : <input id="seekTo1" type="text" value="10" /> <input id="seekTo2" type="text" value="50" /> 
 
<input id="update" type="button" value="Update" /> 
 
Current Value : <span id="val">0 - 50</span> 
 
</body> 
 
</html>

來源

2014-11-21 11:26:45

上面的代碼只顯示一個button.But我需要從其他方面多了一個.. – Phani 2014-11-21 11:31:37

現在@Phani檢查...檢查更新的答案！ '：）' – 2014-11-21 11:32:03

感謝您的快速回復，但我們如何獲得這兩個按鈕的價值。現在它只顯示一個值。 – Phani 2014-11-21 11:35:16

具有兩個值（最小值和最大值）範圍的Seekbar

回答

相關問題