Home » Tutorials » JavaScript » Build A jQuery Range Slider Within 5 Minutes!

Build A jQuery Range Slider Within 5 Minutes!

Build A jQuery Range Slider Within 5 Minutes!

  • Stumble it!
  • Share

In this tutorial, you will learn to build a cross-platform range slider powered by jQuery within 5 minutes! Please check out the demo, to see what are we going to build later.

View Demo

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 :)

View Demo


  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes

  • Marcel Rek

    Greate tut! Thank You!

    • http://www.onlywebpro.com onlyWebPro

      You’re welcome! Stay connected with us via facebook ya :)

  • jack

    how can i have only one slider begining from 0 to end

    • http://www.onlywebpro.com onlyWebPro

      Hi jack,

      for one slider, please refer to this :) i hope it helps to solve your problem.

      http://jqueryui.com/slider/

  • http://twitter.com/chenrytweet Chris Henry

    This is a great script. How easy is it to define fixed values for the sliders to jump to?

    • http://www.onlywebpro.com onlyWebPro

      Sorry? Do you mind to describe your question in details? :)

  • http://hariweblog.com/ Hariharan

    I need to display the products within that price range.. How will you write coding for it? …. :P

  • HelloThere

    How can i get the value of the slider? PLEASE HELP ASAP!

Android, iOS Development Tutorials