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 );} 

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] );} 

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 ..' );


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 know 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 so 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" );}

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.
Visitors Rating
Your Rating


Post Comment This is for short comments only. Use the forum for more discussions.

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 All rights reserved worldwide Privacy Policy Disclaimer