Use your left/right keys to browse tutorials
jQuery UI Slider

jQuery UI Slider

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on May 19, 2011

I’ve been hugely inspired recently by the design work of Orman Clark from Premiumpixels.com and his generous selection of top quality PSD downloads. after seeing this beautiful design of a button and slider set I was eager to code up a working version using jQuery UI. You can grab the PSD for the design here along with tons of awesome resources.

The Code

Most of the code is CSS for this one so lets start here


body{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}

The JavaScript

Using jQuery UI is pretty painless. It’s very easy to setup you simply add a holder div for your slider, in this case we’re specifying the div with the class ‘.slider’ we then call the slider() method passing the in some values.

 $( ".slider" ).slider({
	        animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
				step: 10,
                
				//this gets a live reading of the value and prints it on the page
                slide: function( event, ui ) {
                    $( "#slider-result" ).html( ui.value );
                },

				//this updates the hidden form field so we can submit the data using a form
                change: function(event, ui) { 
                $('#hidden').attr('value', ui.value);
                }
			
				});

The HTML

Pretty simple snippet of HTML…

       <div class="slider"></div> 
        <div id="slider-result">50</div>   
  	<input type="hidden" id="hidden"/>

download



More tutorials from Papermashup
  • Damarawy

    I’m building a webpage that gets a number of inputs from a previous page and creates sliders according to that number, the thing is I want to set the ‘max’ dynamically so that the total of all of the sliders doesn’t exceed 100%:
    So if we have 3 sliders and the user set the first slider to 30, the maximum of the rest should be 70; so that when the user sets the second slider to the maximum (70) the third slider’s maximum value should be 0…your response would be appreciated.

  • Damarawy

    I’m building a webpage that gets a number of inputs from a previous page and creates siders according to that number, the thing is I want to set the ‘max’ dynamically so that the total of all of the sliders doesn’t exceed 100%:
    So if we have 3 sliders and the user set the first slider to 30, the maximum of the rest should be 70; so that when the user sets the second slider to the maximum (70) the third slider’s maximum value should be 0…your response would be appreciated.

  • Pingback: jQuery UI Slider refuses to display custom handle | Jisku.com - Developers Network

  • Pingback: jQuery UI Slider refuses to display custom handle | Jisku.com - Developers Network

  • ulle

    here is the code as html-page width some small code corrections.
    you can use the jquery-ui.css in parallel.

    jQuery UI Slider

    .slider {
    width:230px;
    height:11px;
    background:url(slider-bg.png);
    position:relative;
    margin: 22px 12px 22px 12px;
    padding:0 10px;
    border: 0;
    }

    .ui-slider-handle {
    width:24px;
    height:24px;
    position:absolute;
    top:-7px;
    margin-left:-12px;
    z-index:200;
    background:url(slider-button.png) !important;
    background-repeat:no-repeat !important;
    border: 0 !important;
    padding: 2px !important;
    }

    #slider-result {
    font-size:50px;
    height:40px;
    font-family:Arial, Helvetica, sans-serif;
    color:#eee;
    width:250px;
    text-align:center;
    text-shadow:0 1px 1px #000;
    font-weight:700;
    margin: 12px;
    }

    /*fill bar*/
    .ui-widget-header {
    background-color: transparent !important;
    background:url(fill.png) no-repeat left !important;
    height:8px !important;
    left:1px !important;
    top:1px !important;
    position:absolute !important;
    }

    a {
    outline:none;
    -moz-outline-style:none;
    }

    var startValue = 22;
    $(‘#slider-result’).html(startValue);

    $( “.slider” ).slider({

    animate: true,
    range: “min”,
    value: startValue,
    min: 0,
    max: 100,
    step: 10,

    slide: function( event, ui ) {
    $( “#slider-result” ).html( ui.value );
    },

    change: function(event, ui) {
    $(‘#hidden’).attr(‘value’, ui.value);
    }

    });

  • ulle

    here is the code as html-page width some small code corrections.
    you can use the jquery-ui.css in parallel.

    jQuery UI Slider

    .slider {
    width:230px;
    height:11px;
    background:url(slider-bg.png);
    position:relative;
    margin: 22px 12px 22px 12px;
    padding:0 10px;
    border: 0;
    }

    .ui-slider-handle {
    width:24px;
    height:24px;
    position:absolute;
    top:-7px;
    margin-left:-12px;
    z-index:200;
    background:url(slider-button.png) !important;
    background-repeat:no-repeat !important;
    border: 0 !important;
    padding: 2px !important;
    }

    #slider-result {
    font-size:50px;
    height:40px;
    font-family:Arial, Helvetica, sans-serif;
    color:#eee;
    width:250px;
    text-align:center;
    text-shadow:0 1px 1px #000;
    font-weight:700;
    margin: 12px;
    }

    /*fill bar*/
    .ui-widget-header {
    background-color: transparent !important;
    background:url(fill.png) no-repeat left !important;
    height:8px !important;
    left:1px !important;
    top:1px !important;
    position:absolute !important;
    }

    a {
    outline:none;
    -moz-outline-style:none;
    }

    var startValue = 22;
    $(‘#slider-result’).html(startValue);

    $( “.slider” ).slider({

    animate: true,
    range: “min”,
    value: startValue,
    min: 0,
    max: 100,
    step: 10,

    slide: function( event, ui ) {
    $( “#slider-result” ).html( ui.value );
    },

    change: function(event, ui) {
    $(‘#hidden’).attr(‘value’, ui.value);
    }

    });

  • http://www.hallroad.pk Frank Martin

    Can you please guide how to get images and titles from database? like if there is a classifieds site and we need to pull the featured ads into Slider?
    thanks in advance.

  • Moes

    Thanks for this tutorial, what is an easy way to post this value to a php script? And what does the php script need exactly?

    I want to use it to show data from a mysql database.

    Many thanks in advance.

  • dirk

    thanks. helped me alot.