Generally we use range slider during we decide a specific range of value to input the system. For an example in a shopping cart application if you want to find out all dress materials with in your budget ($100 to $300) in such case range slider is very useful. To develop a responsive range slider from scratch is a time consuming job. Looking into this Jquery UI provides in-built Jquery range slider. It’s very easy and less time consuming job to implement in your application.
Look at the demo app below. Here in my HTML page I have 2 div’s. One is displaying range slider selected values while other one is responsible for Jquery UI slider. To integrate Jquery UI in the below app I referred Jquery library, Jquery UI CSS & Jquery UI CDN links.
To implement range Slider I am applying Jquery UI in-built slider method to the div with id rangeSlider. To Configure my range Slider according to my inputs here I passed various parameters such as range, min, max & values. By declaring range: true I am telling Jquery UI slider to provide me a range based Control. Using min & max I am assigning the minimum and maximum value for the range Slider. Values are nothing but the initial range. Here my slider is showing range from 100 to 600 dollars. Initial during after page load by setting values to 200 to 400 I am showing the slider range in-between 200 to 400 dollars. For more API functions like Orientation or Slide you can refer http://api.jqueryui.com/slider/.
This Jquery range slider is designed by Jquery UI. It is completely browser compatible and supports all modern browsers. Even you don’t need to worry about it’s responsiveness. Independent of all devices this range slider works fine. To the run the below app just copy the codes to a notepad file. Save it as a html file & open in your browser. As in the below app we are referring CDN links make sure while running the app you are with internet connectivity.
Example.htm
<!DOCTYPE html>
<html>
<head>
<title>Responsive Jquery range slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#rangeSlider").slider ({
range: true,
min: 100,
max: 600,
values: [200, 400],
slide: function(event, ui) {
$("#priceRange").html("$" + ui.values[0] + " - $" + ui.values[1]);
$("#minimumPrice").val(ui.values[0]);
$("#maximumPrice").val(ui.values[1]);
}
});
/* In real-time updating the value of range Slider to Span */
$("#priceRange").html("$" + $("#rangeSlider").slider("values", 0) + " - $" + $("#rangeSlider").slider("values", 1));
});
</script>
</head>
<body>
<div>Selected Range: <span id="priceRange"></span></div>
<br />
<div id="rangeSlider"></div>
</body>
</html>
