Sliders are used to change data over a range by moving pointer between maximum and minimum value. This is also used as range selector to input data to any process.

Click on the above slider

The pointer can be moved by using Mouse pointer ( Holding the left mouse button ) or by using left and right arrow of keyboard.

These are used in color picker, volume controllers etc. We have to link Jquery UI from google CDN like this.
<script src=""></script>


We can add various options to manage our slider as per requirement.
$(function() {
    $( "#slider" ).slider({
slide: function(event, ui) { $( "#d1" ).html( ui.value );} 

Orientation : vertical or horizontal

orientation: "vertical"

Double pointed slider with Minimum and Maximum range

By using rage option we can display two pointers to same slider to show Min and Max value . It works like range selector giving two outputs. Instead of reading one value we will get two values.
$(function() {
    $( "#slider" ).slider({
slide: function(event, ui) { $( "#d1" ).html( "Min value:" + ui.values[0] ), $( "#d2" ).html("Max value:" + ui.values[1] );} 
Adding default value to double pointed slider

Event : Change

Change event is triggered once the slider pointer movement is completed by user. So this doesn't give continuous change value of the slider.
$(function() {
    $( "#slider" ).slider({
change: function(event, ui) { $( "#d1" ).html( ui.value );} 
Here d1 is the id of Div layer inside which we are displaying the value.

Event : Slide

This event is triggered when the slider is on move; this gives continuous change value of the slider.
$(function() {
    $( "#slider" ).slider({value:50,min: 0,max: 100,step: 1,slide: function( event, ui ) {
                $( "#d1" ).html( ui.value );


Event: Start and Stop of movement

Start and stop event is triggered by starting and stopping of pointer while moving or changing position.
$(function() {
    $( "#slider" ).slider({
            min: 0,
            max: 100,
            step: 1,
            slide: function( event, ui ) {
                $( "#t1" ).val( ui.value );
            start: function( event, ui ) {
                $( "#d1" ).html('Started ..' );

            stop: function( event, ui ) {
                $( "#d1" ).html('Stopped ..' );

If you are updating the database record with the final value then better to use STOP event. By using slide event, unnecessarily we will be updating records on each step of slider movement.

If you are displaying the change value to users then show them each step of change by using SLIDE event.

START event can be used to highlight a particular slider from a group of slider which is in current use.

Adding attributes to Slider

We can keep additional information in the form of attributes and use them. HTML5 supports these extra information in the format data-*

This is required when we want to know which one is used by user from a group of sliders having different attributes. When displaying different group of records with different set values we can add more attributes to each slider to know which one is changed or used by user.

Whenever any slider is changed by user we can read the attributes like this.
Our slider with additional attributes is here
<div id="slider" data-name=my_name data-group=abc data-qty=yes value=35></div>

Changing value through text box

We can change the value by entering data in a textbox or by sliding the pointer.
$(function() {
  $( "#slider" ).slider({value:40,min: 0,max: 100,step: 1,slide: function( event, ui ) {
        $( "#t1" ).val( ui.value );
$( "#slider" ).slider({value:$('#t1').val()})

By using another widgets known as spinner we can increment or decrement data in a text box. We will try to develop a script to interlink one Spinner with Slider. By changing any one, other value can be changed.

More on JQuery UI Spinner

Method: Enable Disable Slider

We can change the status of slider to enable or disable by changing status of a checkbox. You can read how to get the status of a checkbox here. Here is the code.
 var ckb_status = $("#ckb").prop('checked');
if(ckb_status){$( "#slider" ).slider( "enable" );}
else{$( "#slider" ).slider( "disable" );}

Managing Style of a Slider

.ui-slider-horizontal {
    height: 12px;
    width: 250px;
.ui-slider .ui-slider-handle {
    height: 20px;
    width: 18px;
    padding-left: 5px;
We can add image to slider pointer , here is the style property to use one arrow image as slider pointer.
.ui-slider-horizontal .ui-state-default {background: white url(../images/arrow.jpg) no-repeat scroll 50% 50%;}

Time setting by Sliders with Calendar

By changing Hour, Minute and Second through slider we can set time We can select date and time by selecting date from calendar and time by changing hour, minute and second slider.

Changing HEX value to change color

By changing the slider we can change the background color of a div tag . We will use colour animation of JQuery UI

$(function() {
    $( "#slider" ).slider({
range: "max",
      min: 1,
      max: 255,
slide: function(event, ui) { 
var rc=ui.value;
$( "#c1" ).animate({ backgroundColor: "rgb( " + rc + ", 0,0 )"},1);


Using 3 colour sliders for Red Green & Blue colors

We can combine three colour sliders to make a colour combination to use as background color of a div layer

Changing FONT & Background color

Generate style Property by changing R G B color sliders. You can change background color , font color, font size and text alignment property of a div tag.


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer