jQuery slider range [javascript] - blog.howtoclicks.com

jQuery slider range

javascript

A jQuery UI slider range allows you to create a range slider with two handles, which can be used to select a range of values. Here’s an example of how to create a jQuery UI slider range:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Slider Range Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
  <div id="slider-range"></div>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly>
 
  <script>
    $(function() {
      $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1000,
        values: [200, 600],
        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>

In the above example, a div element with an id of “slider-range” is created. The slider() method is called on this element to create a jQuery UI slider range. The range option is set to true to enable the range slider with two handles. The min and max options specify the minimum and maximum values of the slider range. The values option specifies the initial values of the two handles. The slide option specifies a function to be called when the slider is moved, which updates the text of an input element with an id of “amount” to display the selected range.

Note that this is a simplified example and you will need to modify it to suit your specific requirements, such as changing the styling or behavior of the slider, or using different options or event handlers.

jQuery slider range

Other Article on Tag javascript

All Tags