Seekbar with range of two values (min and max)

Question

Seekbar with range of two values (min and max)

4k Views Asked by Phani At 03 April 2025 at 07:00

I am working on a search functionality.I need to select min price and max price with a seekbar. I have searched a lot in google, But I found seekbar with one value.Below is the code I got.

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

Some one help me how to have both min and max values with single bar..

I am working on PHP website. If you have any example code in php , it will be helpful..

Additional One:

And one more doubt, If this is not a range of values,and if it is like A A+ B B+ C C+ ... How can we take them in this type of seekbar..

Original Q&A

There are 1 best solutions below

**Praveen Kumar Purushothaman** · Accepted Answer

Use range: true option!

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

Seekbar with range of two values (min and max)

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SEEKBAR

Trending Questions

Popular # Hahtags

Popular Questions