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
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>
jQuery Range Slider Using jQuery UI
Range sliders are essential UI components that allow users to select a value or range of values within a specified minimum and maximum limit. They enhance user interaction by providing a visual and intuitive way to input data. jQuery UI, a popular library built on top of jQuery, provides a simple yet powerful way to implement range sliders with minimal coding.
Understanding jQuery UI Slider
The jQuery UI Slider widget converts a standard HTML element into an interactive slider. It supports single handles for selecting a single value or multiple handles for defining a range. The slider can be customized in terms of appearance, behavior, and functionality, making it suitable for various applications such as price filters, volume controls, and data visualization.
Key Features of jQuery UI Slider 1. Customizable Range – Define minimum and maximum values. 2. Single or Dual Handles – Choose between a single slider or a range slider. 3. Step Increments – Set predefined intervals for slider movement. 4. Smooth Animation – Enable or disable sliding animation. 5. Event Handling – Respond to user interactions like sliding, start, and stop. 6. Theming – Apply jQuery UI’s built-in themes or custom CSS.
Best Practices
1. Accessibility – Ensure keyboard navigation and ARIA attributes for screen readers.
2. Responsive Design – Adjust slider dimensions for different screen sizes.
3. Performance Optimization – Avoid heavy computations in event handlers.
4. Fallback Mechanism – Provide an alternative input method for non-JavaScript users.
Conclusion
The jQuery UI range slider is a flexible and user-friendly component that enhances web applications by providing an intuitive way to select values. With its extensive customization options and ease of implementation, it remains a preferred choice for developers. By following best practices and leveraging advanced features, you can create interactive sliders that improve user experience across various use cases. The ability to integrate smoothly with existing JavaScript code makes it a valuable tool in modern web development.
