5 demos of jQuery range slider by using a plugin

The range slider

To enhance the user experience if your website takes user input by way of web forms, adding the simple slider or range slider for required information can be good. For example, for selecting age group, salary range, or any other numeric requirement can be shown and selectable by way of visual selectors.

In this tutorial, I am going to show you such a plug-in which is jQuery based and can be easily integrated into web pages. So, let me start with a few demos and a setting up guide on the way. (plug-in can be downloaded here)

A simple jQuery slider demo

In this example, a simple slider is created by using the jRange plug-in. This slider can be used for a numeric value selection, for example, number of creditors, year of experience or some other. Have a look at the demo and setting up steps.

jQuery slider

Complete code:

<!DOCTYPE html>
<html>
<head>
<link href="css/jquery.range.css" rel="stylesheet" type="text/css">

</head>

<body>
<div class="container">
<h3>A demo of jQuery slider</h3><br />
<input class="simple-slider" type="hidden" value="25"/><br>

</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jrange/jquery.range.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $('.simple-slider').jRange({
                from: 1,
                to: 100,
                step: 1,
                scale: [5,25,50,75,100],
                format: '%s',
                width: 300,
                showLabels: true
            });
 
        });
    </script>
</body>
</html>

Follow these steps for setting up this plug-in on your web page.

Step 1:

Include the jRange CSS file in the <head> section.

<link href=”css/jquery.range.css” rel=”stylesheet” type=”text/css”>

Step 2:

Write the markup where you simply need to create an input type hidden and assign it the class name which is referred in the <script> part. For example, I used the simple-slider class name.

<input class=”simple-slider” type=”hidden” value=”25″/>

Step 3:

Just above the </body> tag, place the jQuery library and plug-in JS file,:

<script src=”js/jrange/jquery.range.js”></script>

Step 4:

Finally, the code for initiating the slider with certain options. You may use many available options, a few of which I will use in coming examples.

For example,

  • from sets the value where slider value should start from.
  • to: specifies the maximum number.
  • step: specifies the gap.
  • scale: In the output of demo, you can see the scale with these numbers

A demo of creating jQuery range slider

In this example, a range slider is created by using the plug-in. The markup section remains the same as in above example. Just the <script> part is changed where isRange option is added.

jQuery range slider

The code:

<!DOCTYPE html>
<html>
<head>

<link href="css/jquery.range.css" rel="stylesheet" type="text/css">



</head>

<body>
<div class="container">
<h3>A demo of jQuery range slider</h3><br />
<input class="range-slider-demo" type="hidden" value="50"/><br>

</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jrange/jquery.range.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
        $('.range-slider-demo').jRange({
            from: 1,
            to: 100,
            step: 1,
            scale: [1,25,50,75,100],
            format: '%s',
            width: 500,
            showLabels: true,
            isRange : true
        });
 
        });
    </script>
</body>
</html>

By using the isRange : true, the slider acts as the range slider where a user may select the minimum and maximum values.

See the complete code in the demo page.

An example of showing the selected values in range slider

As working in the real-time project, you will need the selected value of simple and values for range sliders in order to save it in the database or perform a certain action based at this. Since this slider is most probably is used in the web forms.

Let me show you, how you may get the value selected by the user. For that, I have used the change event of the input type hidden, that acts as a slider. As you click somewhere in the slider, the alert will show both values of the selected range.

jQuery range slider values

Complete code:

<!DOCTYPE html>
<html>
<head>

<link href="css/jquery.range.css" rel="stylesheet" type="text/css">



</head>

<body>
<div class="container">
<h3>A demo of jQuery range slider</h3><br />
<input class="range-slider-demo" type="hidden" value="50"/><br>

</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jrange/jquery.range.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
        $('.range-slider-demo').jRange({
            from: 1,
            to: 100,
            step: 1,
            scale: [1,25,50,75,100],
            format: '%s',
            width: 500,
            showLabels: true,
            isRange : true
        });
 
 
             $( ".range-slider-demo" ).change(function() {
             var rangesValues = $( ".range-slider-demo" ).val(); 
             alert (rangesValues) 
            });
 
 
        });
    </script>
</body>
</html>

Only this code is added in the <script> section of above example:

$( ".range-slider-demo" ).change(function() {

var rangesValues = $( ".range-slider-demo" ).val();

alert (rangesValues)

});

Using blue theme rather than green demo

The included CSS file with plug-in contains other themes that you may specify in the <script> section for changing the color of slider.

In this example, I have specified the theme-blue and the outcome is as follows:

jQuery range slider blue

This is how the option of theme is added in the <script> section:

<script type="text/javascript">

$(document).ready(function(){

$('.range-slider-demo').jRange({

from: 1,

to: 100,

step: 1,

scale: [1,25,50,75,100],

format: '%s',

width: 500,

showLabels: true,

theme : 'theme-blue',

isRange : true

});

});

</script>

Using your own custom theme

By adding a few classes in the plug-in CSS file or in the <style> section, you may refer your own theme in the <script> section that matches the rest of the form or website’s theme.

In this example, I have taken theme classes from the CSS file and placed those in the <style> section under the <head> tag. I named it theme-maroon and referred this in the <script> section as well.

 

jQuery range slider custom CSS

The following classes for themes are taken and changed:

.theme-maroon .back-bar {

height: 5px;

border-radius: 2px;

background-color: #FFCCCC;

background-color: #e7e7e7;

background-image: -moz-linear-gradient(top, #FFCCCC, #FFCCCC);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));

background-image: -webkit-linear-gradient(top, #FFCCCC, #FFCCCC);

background-image: -o-linear-gradient(top, #FFCCCC, #FFCCCC);

background-image: linear-gradient(to bottom, #FFCCCC, #FFCCCC);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);

}

.theme-maroon .back-bar .selected-bar {

border-radius: 2px;

background-color: #400000;

background-image: -moz-linear-gradient(top, #400000, #A80000);

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));

background-image: -webkit-linear-gradient(top, #400000, #A80000);

background-image: -o-linear-gradient(top, #400000, #A80000);

background-image: linear-gradient(to bottom, #400000, #A80000);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);

}

Similarly, you can change the height, width, circle and other properties by changing the in the main CSS file or overriding in the <style> section.