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
Comments
20 discussions around jQuery UI Slider
Older Comments
  1. Damarawy says:

    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.

  2. Damarawy says:

    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.

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

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

  5. ulle says:

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

    });

  6. ulle says:

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

    });

  7. Frank Martin says:

    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.

  8. Moes says:

    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.

  9. dirk says:

    thanks. helped me alot.

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.