두 값 (최소값 및 최대 값)의 범위를 가진 탐색 표시 자

검색 기능을 사용하고 있습니다. 검색 바를 사용하여 최소 가격과 최대 가격을 선택해야합니다. Google에서 많은 검색을 해왔지만, 하나의 값으로 검색 바를 찾았습니다. 아래 코드는 내가 가진 코드입니다. 두 값 (최소값 및 최대 값)의 범위를 가진 탐색 표시 자

<!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 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 – Phani

.. 다른 측면에서 하나 더 필요 ... 업데이트 된 대답을 확인 보여줍니다! ':)' –

답장을 보내 주셔서 감사합니다.하지만 두 단추의 값을 어떻게 얻을 수 있습니까? 이제는 단 하나의 값만 표시됩니다. – Phani

두 값 (최소값 및 최대 값)의 범위를 가진 탐색 표시 자

답변

관련 문제