Welcome to this quick and easy tutorial! In just five minutes, you’ll learn how to create a sleek and responsive cross-platform range slider using jQuery. Range sliders are a great way to enhance your website’s user interface, allowing users to select a range of values with ease. In this guide, we’ll walk you through every step of the process—from setting up your environment to adding custom features for a polished, interactive slider.
To see exactly what we’ll be building, don’t forget to check out the live demo below. Let’s dive in and get started!
Note: This is the advanced version of the jQuery Slider from jQuery UI official page.
The required resources for building the range slider are:
Ok, let’s start our tutorial, once you have downloaded the required resources as mentioned above.
Define the Structure & Include Required Resources
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>jQuery UI Slider – Range slider</title>
<link rel=”stylesheet” href=”http://jqueryui.com/themes/base/jquery.ui.all.css”>
<script src=”./jQuery UI Slider – Range slider_files/jquery-1.7.1.js”></script>
<script src=”./jQuery UI Slider – Range slider_files/jquery.ui.core.js”></script>
<script src=”./jQuery UI Slider – Range slider_files/jquery.ui.widget.js”></script>
<script src=”./jQuery UI Slider – Range slider_files/jquery.ui.mouse.js”></script>
<script src=”./jQuery UI Slider – Range slider_files/jquery.ui.slider.js”></script>
<link rel=”stylesheet” href=”http://jqueryui.com/demos/demos.css”>
</head>
<body>
<div class=”demo”>
<p>
<select id=”my_min” class=”price_range”>
<option value=”0″>0</option>
<option value=”10″>10</option>
<option value=”20″>20</option>
<option value=”30″>30</option>
<option value=”40″>40</option>
</select>
<select id=”my_max” class=”price_range”>
<option value=”0″>0</option>
<option value=”10″>10</option>
<option value=”20″>20</option>
<option value=”30″>30</option>
<option value=”40″>40</option>
</select>
<label for=”amount”>Price range:</label>
<input type=”text” id=”amount” style=”border:0; color:#f6931f; font-weight:bold;”>
</p>
<div id=”slider-range” class=”ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all”>
<div class=”ui-slider-range ui-widget-header”></div>
<a class=”ui-slider-handle ui-state-default ui-corner-all” href=”http://jqueryui.com/demos/slider/range.html#”></a><a class=”ui-slider-handle ui-state-default ui-corner-all” href=”http://jqueryui.com/demos/slider/range.html#”></a>
</div>
</div>
<!– End demo –>
</body>
</html>As you can seen above, we have created 2 form select option boxes, which contains the minimum amount and maximum amount. These fields value will adjust corresponding to the range slider’s value. In order to make the work easy, we have create the range slider with an id “slider-range” and assigned the default pre-defined theme classes to it. (You can find all these classes in the css library of jQuery, which included in the head scetion).
JavaScript Function
In order to make the range slider workable, We need the help from JavaScript. First of all, we initial the slider when the document is ready:
$(function() {
/************* Initialize Price Range Slider *************/
$(“#slider - range”).slider({
range: true,
min: 0,
max: 40,
step: 10, // Use this determine the amount of each interval
values: [20, 40], // The default range
slide: function(event, ui) {
$(“#amount”).val(“$” + ui.values[0] + ”–$” + ui.values[1]); // for input text box
$(“#my_min”).val(ui.values[0]); // Display and selected the min Price
$(“#my_max”).val(ui.values[1]); // Display and selected the max Price
}
});
/************* Set Initial Value of the Dropdown Box *************/
//For dropdown box
$(“#my_min”).val($(“#slider - range”).slider(“values”, 0));
$(“#my_max”).val($(“#slider - range”).slider(“values”, 1));
});As you can see, several options has been defined in the functions, such as ‘range’, ‘min’, ‘max’and ‘values’. I’m not going to describe much on the options here, because you can found more details about it in the documentation of jQuery UI Library.Besides, in the slide function, you can see that, we have tied the default value of the form select options with the value of the range slider.
Save your document and view it in the browser, play around with the slider and you should able to see the form select option boxes’s value changed according to your range slider. Nice right? But wait!!! There is a problem there! How about your user select the value directly from the select option boxes?
Then, here is the solution for you to overcome the problem.
/************* When user choose from dropdown box directly *************/
$(“select.price_range”).change(function() {
$myMinValue = $(“#my_min option: selected”).val();
$myMaxValue = $(“#my_max option: selected”).val();
//Make changes on the slider itself
if ($myMinValue <= $myMaxValue) {
$(“#slider - range”).slider({
values: [$myMinValue, $myMaxValue]
});
} else {
alert(“Invalid Input”);
}
});Bind an event listener to your form select option boxes, and adjust the range slider position every time when you user change the value of it. Besides, we also do some validation to make sure the minimum value is always lower than the maximum value.
Save your document and view it again in your browser. This time your browser should be work smart and properly 🙂
Conclusion
Congratulations! You’ve successfully built a cross-platform range slider using jQuery in just a few minutes. With this simple yet powerful component, you can enhance the user experience on your website or web application, offering interactive controls that are both functional and visually appealing.
Remember, this tutorial covered the essentials, but you can further customize the slider by adjusting its design, adding features like tooltips, or even integrating it with other jQuery plugins for even more interactivity. Feel free to experiment and tailor the slider to suit your specific needs.
If you found this guide helpful, don’t forget to share it with others, and be sure to check out more of our tutorials for web development tips, tricks, and tools!