Sliders in jQuery
Sliders are quite common these days on different types of websites. From an e-commerce site to specify the range of prices to search products, in financial websites to select income or loan ranges to web developers or designers to select color combinations or audio sites using equalizers, etc. sliders are quite visible and liked by users. It also enhances user experience where you can replace traditional text/select boxes by beautiful and easy-to-use sliders.
jQuery UI plugin makes it quite easier to design and use sliders in your website. By using jQuery slider plugin, most of the complex work is already done. As a designer or developer of the website you simply need to include jQuery, jquery-ui library and refer the jQuery slider plugin to your web pages to use sliders in your projects.
In this tutorial, you will see how to use jQuery slider with the different types of examples. You can click on the demo and code link to get free code that you can simply copy into your web pages and easily amend as per website theme.
A simple slider example
At its simplest, you can create a slider by using the slider jQuery plugin in your web page. In the following example, I will show you how you can create a basic slider by using a few lines of code.
See online demo & code
The jQuery code for this slider:
<script>
$(function() {
$( "#simpleslide" ).slider({
value: 50
});
});
</script>
The CSS:
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 2.2em;
height: 2.2em;
cursor: default;
background:#FDF8E4;
-ms-touch-action: none;
touch-action: none;
}
.ui-slider-horizontal {
height: 1.8em;
background:#846733;
}
The simple markup using a paragraph tag:
<p style="width: 400px; " id="simpleslide"></p>
In the demo, I simply used a paragraph and used its ID in jQuery code. Also note, you have to modify slider classes in order to change the default colors to match your theme.
Multiple sliders with values
The following demo uses two jQuery UI horizontal sliders. I have styled both differently and their values are shown as sliding occurs in two paragraphs. In real time applications, this can be age, selecting maximum and minimum values etc. that you can send with forms or in AJAX calls to retrieve data on that basis.
See online demo & code
The jQuery code:
<script>
var slide1val,slide2val;
function currval() {
slidevalue1 = $( "#slide1" ).slider( "value" );
slidevalue2 = $( "#slide2" ).slider( "value" );
$( "#dispval" ).text(slidevalue1);
$( "#dispval2" ).text(slidevalue2);
// alert (slidevalue);
}
$(function() {
$( "#slide1" ).slider({
slide: currval,
value: 60
});
$( "#slide2" ).slider({
slide: currval,
value: 20
});
});
</script>
The Markup:
<p style="width: 400px; " id="slide1"></p> <p id="dispval">60</p> <p style="width: 400px;background:#7AA33F; " id="slide2"></p> <p id="dispval2">20</p>
You can see in slider jQuery example, how I assigned values to paragraph elements to let the user know. In that case, the value is increased by +1 or -1 as you move the slider right or left, respectively. See the following demo, to increase the value by 10 or as per the need of your project.
Slider in jQuery UI with step option
In this slider example, the value will be increased or decreased by 10 as you slide to the right or left. This is a single slider with a paragraph showing the current value of the slider. The slider widget has a Step option that you can use to increase or decrease the slide value by given “steps”.
See online demo & code
You can see, the min, max, and step options are used in the code. Every time you slide from right to left or vice versa the value will be changed by 10, as this is what I have specified in step option. You can change it to the required level. Similarly, rather than assigning a value to a paragraph you can assign it to any other element, including text fields.
jQuery vertical slider
Creating a vertical slider is quite easy by using the jQuery UI plugin. You simply need to specify the orientation option which has two values, either horizontal or vertical. The default is horizontal that we have used in the above slider examples.
To create a vertical slider in jQuery, simply use orientation: vertical. In the following demo, you can see the vertical slider:
See online demo & code
jQuery code:
<script>
var slide1val,slide2val;
function currval() {
slidevalue2 = $( "#slide2" ).slider( "value" );
$( "#dispval2" ).text(slidevalue2);
}
$(function() {
$( "#slide2" ).slider({
orientation: "vertical",
value:20,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#dispval2" ).text( ui.value );
}
});
});
</script>
Markup:
<p style="width: 20px;height:200px;background:#7AA33F; " id="slide2"></p> <p id="dispval2">20</p>
You can change the color as per your theme and also get the value to perform some action based on user selection. Just like last horizontal example, as you slide the step value is kept ten i.e. value increments or decreases by 10.