Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 4 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery UI Slider

AshleyAshley

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

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 20
  • Damarawy
    Posted on

    Damarawy Damarawy

    Reply Author

    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
    Posted on

    Damarawy Damarawy

    Reply Author

    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.


  • ulle
    Posted on

    ulle ulle

    Reply Author

    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
    Posted on

    ulle ulle

    Reply Author

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

    });


  • Frank Martin
    Posted on

    Frank Martin Frank Martin

    Reply Author

    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
    Posted on

    Moes Moes

    Reply Author

    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
    Posted on

    dirk dirk

    Reply Author

    thanks. helped me alot.


  • Chris
    Posted on

    Chris Chris

    Reply Author

    Awesome tutorial. Beautiful work.


  • Chris
    Posted on

    Chris Chris

    Reply Author

    Is there an easy way to make the slider larger? Say I need the slider to be 500 px wide instead of 230px. I’m pretty bad at photoshop. I’m trying to copy each layer and then paste it next the original. But, it’s not working, any suggestions?


    • Chris
      Posted on

      Chris Chris

      Reply Author

      I played around with Photoshop and I figured it out.

      Very Cool tutorial. Thanks.


  • lukas
    Posted on

    lukas lukas

    Reply Author

    Thanks man! Great stuff, just what I needed!


  • Joey
    Posted on

    Joey Joey

    Reply Author

    Thanks for this code, just what I needed !

    However, i’m not a javascript developper and I need to use and change the variables. How can I do that ?


  • Pritesh Desai
    Posted on

    Pritesh Desai Pritesh Desai

    Reply Author

    Thanks for the tutorial! The slider looks amazing.


  • Lil
    Posted on

    Lil Lil

    Reply Author

    I really appreciate the simplicity of this. Thank you so much! Just what I needed.


  • Mike
    Posted on

    Mike Mike

    Reply Author

    Nice article. Helped me with some styling issues on the slider. Cheers,


  • Mark Lawrence
    Posted on

    Mark Lawrence Mark Lawrence

    Reply Author

    Always love your articles. I’ve been meaning to implement sliders for my select menus in my CMS for a while and this has been a great help. Thanks for the ref to Premium Pixels, another site to pay attention to.


  • Noah
    Posted on

    Noah Noah

    Reply Author

    Thanks Dude, this is great!