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!

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">
<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">
<div class="demo">
    <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 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>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
  <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>
<!-- End demo -->

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


  1. Marcel Rek 04/11/2012 at 6:56 pm

    Greate tut! Thank You!

    • onlyWebPro 01/27/2013 at 2:51 am

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

  2. jack 01/25/2013 at 12:10 pm

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

  3. Chris Henry 02/11/2013 at 7:32 pm

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

    • onlyWebPro 02/14/2013 at 4:43 am

      Sorry? Do you mind to describe your question in details? 🙂

  4. Hariharan 09/14/2013 at 5:17 pm

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

  5. HelloThere 11/05/2013 at 2:42 am

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

  6. mvc starter 01/06/2015 at 9:36 am

    i want to shap sliders like http://www.pakwheels.com/used-cars/search/-/mk_honda/md_civic/ct_islamabad/pr_1000000_1200000/

    check on left side column.. copied noui css too but unable to shape.. needed bit direction

  7. Apple 11/27/2015 at 1:16 pm

    Which type of jquery file or version i need to choose because it cannot show the price range slider on the browser?

    • onlyWebPro 11/28/2015 at 11:39 pm

      Hi Apple,

      Thanks for reading. May I know what version of jQuery library you’re using right now?

      In this showcase is:
      – jQuery Core 1.7.1
      – jQuery UI 1.8.17


      • Apple 11/30/2015 at 1:28 am

        Thanks. I can do that part but can i know how to connect it to databases in php?

      • onlyWebPro 12/12/2015 at 1:07 am

        I think you need to have some basic knowledge in PHP before you can work on the back-end database topic. Please go through some basic tutorials of PHP connect Database at W3School.com – http://www.w3schools.com/php/func_mysqli_connect.asp

        Hope it helps 🙂

Leave a Comment

Android, iOS Development Tutorials