How To Build a Range Slider Input with jQuery UI

Advertise here with BSA

Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them.

I want to demonstrate how to build a more customized version of the range slider using jQuery UI. The slider widget is a part of the jQuery UI core library so it comes prepackaged with the script. This makes it really easy to play with because the documentation has been well-sourced and easy to consume. Check out the live copy of my sample demo to see what we are creating.

Live Demo – Download Source Code

Getting Started

To build our main document there are a number of resources we need to include. The only one I am keeping within the demo folder is styles.css which creates the basic page layout. To get support for the slider widgets we need a copy of the jQuery library, the jQuery UI library, and the jQuery UI CSS all hosted by Google. You may obviously download a local copy if you would rather host these on your own website.


<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Range Slider with jQuery UI - Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Acme">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>

The actual JavaScript call to generate a slider is very simple. I will be creating two sliders within the main body section. The first only uses a single slider control, while the second will use two sliders in a range setting. All of the values can be obtained through jQuery callbacks and even setup into a hidden HTML input field to process within a backend form.

Inner Page HTML

First we need to create a container for the original slider, along with the number counter. Here is what the top of my body HTML content looks like:


  <div id="defaultval">
        Slider Value: <span id="currentval">500</span>
  </div>
  
  <div id="defaultslide"></div>
  
  <br>

#defaultslider is a container which will hold the sliding input element. This means you can directly manipulate the width and height of the object to fit into any portion of your layout. Additionally you can overwrite the default jQuery UI stylesheet effects to customize this to your own liking. jQuery UI Themeroller is an excellent web application which can aid in this process.


  <h2>Ranged Slider</h2>
  <div id="rangedval">
        Range Value: <span id="rangeval">90 - 290</span>
  </div>
  
  <div id="rangeslider"></div>

The latter portion of our page includes a very similar batch of HTML. The value container now uses an ID #rangeval and it has a value of two numbers separated by a dash. JavaScript string manipulation also makes it easy to turn this into an array, or break the numbers down into two distinct input fields.

Custom CSS Effects

My document itself does not have very much CSS which is worth looking into. There are some more unique properties and resets added into the document, but nothing exceptional to help with range sliders. There have been a lot of questions related to theming jQuery UI sliders. Throughout Google you can find a lot of helpful resources.

One great example to share is customizing the internal slider scrollbar color which can be accomplished with rudimentary CSS. It always relates to targeting internal classes within the jQuery UI CSS library. The basic code looks something like this:


div.ui-slider-range.ui-widget-header {
    background: #0000ff;
}

If you want to see more customized examples then I would recommend Codepen. Developers use this as a testing ground for new ideas and there are some unbelievable examples. Possibly my absolute favorite is this UI volume slider which makes use of custom CSS and background images to duplicate the interface of an audio sliding bar.

img

To offer just one more CSS design I would recommend jQuery UI Slider Pips which is a free open source project on Github. You can view a live demo to see how all the various slider inputs look and feel on the page. It is a lot more difficult to customize an HTML5 slider, and so with a little effort you can make a beautiful jQuery UI slider which also adapts gracefully in many web browsers.

Adding the jQuery Code

Finally our last step is to run the .slider() function attached onto each main div element. There are only two on the page but they both require slight adjustments to the default parameter settings. These codes are found at the bottom of my HTML file wrapped inside <script></script> tags. Here is the entire code block:


$(function(){
  $('#defaultslide').slider({ 
    max: 1000,
    min: 0,
    value: 500,
    slide: function(e,ui) {
      $('#currentval').html(ui.value);
    }
  });
  
  $('#rangeslider').slider({
    range: true,
    min: 0,
    max: 1000,
    values: [ 90, 290 ],
    slide: function( event, ui ) {
      $('#rangeval').html(ui.values[0]+" - "+ui.values[1]);
    }
  });
});

The max and min value parameters are easy to figure out. Also the default value will be where the slider places the scrubber button right after the page loads. Notice these values match the current number values found in my HTML. Within the slide parameter we are calling a function which will auto-update every time the user performs a new slide.

These functions will re-update the inner HTML contents inside each counter to represent the new slider value. But if you need these to be passed into a form you could make alternative functions which update an input value using the jQuery .attr() method.

Live Demo – Download Source Code

Closing

Although my example is fairly basic it does introduce how you can build forms around these slider elements. jQuery is a supported library with many older legacy browsers, and it does provide excellent support in many ways HTML5 hasn’t quite nailed down. Feel free to download a copy of my source code and see if you can implement these sliders into your own projects. Also if you have thoughts or questions you can share with us in the discussion area below.