Writings, notes, and work of a Boston based designer

Using the jQuery UI Slider Nov 4 + 2 comments

written by: ryan coughlin

Since I started working with jQuery and the UI. I have always wanted to work with the UI Slider. I always tried playing with it but I never got it execute an operation on slide. I created a slider to change the opacity of my background on my older temp site here at ryancoughlin.com.

UPDATE: Edit changes to the code with available demo below.javascript:;

UPDATE (9/16/09): Created a new jQuery UI Slider example, check it out.


The man behind helping me with the UI Slider can be found here and his screen cast, which was a huge help.

Check out the jQuery UI Slider demo. A simple UI Slider example, that will change the opacity of an element on the page, you can implement it to just about anything you want.

Lets get started, if you want to have it handy, check out the documentation and also make sure to look at the properties and what they control, think of ways that you can work with it to come up with new UI Slider implementations.

One excellent example of the UI slider is at Komodo Media and below is the slider that he created:

If you view the site and play around with the slider, you will see the foliage increase and decrease depending on the position of the slider. This led me to wanting to create something similar along these lines. Since day one with jQuery, I saw the slider and always wanted to be able to know how to work with it. But in this article, I can’t show you how the slider over at Komodo works, sorry maybe Rogie will!

Lets start with all the code below, this controls the slider and the bubble that will let us know the current value of the slider.

    $('#slider-bubble').hide();
	$('#slider-bar').slider({
		handle: '#slider-handle',
		min: 0,
		max: 100,
		start: function(e,ui){
		$('#slider-bubble').fadeIn('fast');
		},
		stop: function(e,ui){
		$('#slider-bubble').fadeOut('fast');
		},
		slide: function(e,ui){
		$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
		//mypos = $('#slider-handle').position().left + 2;  //grab position of slider dot + 2
		var mypos = $('#slider-bar').slider("value");
		$('#slider-bubble').css('left', mypos).text(ui.value);
		$("#slider-handle").css('left', mypos);

		}
	});

Notice we have the following inside the slider function:

  • handle – the class name VolumePills of the click able handle to slide left/right
  • min – sets the minimum value
  • max – sets the maximum value
  • start – execute a function once you move the slider
  • stop – executes a function once you stop moving the slider
  • slide – what should be going on as you slide the handle left/right

When we start to drag the the slider we want a bubble to appear to let us know what the current value of the UI Slider is at. We only want it to appear as we start to slide and disappear when we stop. So this line initially hides the bubble on page load:

$('#slider-bubble').hide();

The next part is fairly easy, it fades the bubble in on start and fades it out on stop:

start: function(e,ui){
     $('#slider-bubble').fadeIn('fast');
},
stop: function(e,ui){
     $('#slider-bubble').fadeOut('fast');
},

The guts of the UI Slider is what is up next to bat, the slide option that controls what is going to be changing as see slide left/right:

slide: function(e,ui){
	$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
	var mypos = $('#slider-bar').slider("value");
	$('#slider-bubble').css('left', mypos).text(ui.value);
	$("#slider-handle").css('left', mypos);
}

Once we start to slide, it will update and change the value of the CSS property “-moz-opacity” and it will change the opacity of the “#panels-contents” element. For the slider, the value is stored in the function parameter “ui” so together with “ui.value” we can use this to update our opacity.

With this following bit of code the “.text(ui.value);” updates the value of that property with the current value of the slider.

The variable “mypos” works with the last line of the slide option to the bubble to print out the current value of the slider. Make sure that the bubble element is set to “position:absolute;” The CSS for my slider is below:

#panel-contents{position:relative;height:40px;}
#small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; }
#large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; }
#slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;}
#slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;}
#slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; }
#box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;}

Hopefully this will clear up any of your problems or questions when using the jQuery UI Slider.

Easier than you thought?

Take a peak at some more?

  • http://www.komodomedia.com Rogie King

    Thanks for the mention bro!

  • http://www.ryancoughlin.com Ryan Coughlin

    @Rogie King anytime! I love how you used the slider on your website. Probably the best real world example.

  • Salman

    Hi dude

    good working example
    but this piece of code does not work with jquery 1.3 and above so can work out a solution that can do this.

    Regards
    Salman
    guls_guys@hotmail.com

  • Pingback: Using the jQuery UI Slider - Tutorial Collection

  • Pingback: 25 Tutorials and Resources for Learning jQuery UI - Speckyboy Design Magazine

  • Pingback: 25 Tutorials and Resources for Learning jQuery UI · rogdykker

  • Pingback: 25 Tutorials and Resources for Learning jQuery UI | Programming Blog

  • Pingback: 25 Tutorials and Resources for Learning jQuery UI | EMDMA

  • Pingback: Tutorials and Resources for Learning jQuery UI « Ulancer

  • http://insomnia8.com Douglass Barak

    Its Definitely good bookmarking for future reference.

  • http://forbiddencitych.com Sharyn Galbiso

    It’s hard to come by decent info on the web.

  • http://fastgames.tk Mike Minton

    i like your articles a lot and will be excited to read more

  • http://www.venusdegavetas.com fabian rios

    kool but. it seems that it only works on firefox!

  • http://www.carbonlighthouse.org brenden

    Hi Ryan, great site! I’ve added a carbon calculator to my non-profit’s website to enable people to calculate their carbon footprints, but I can’t figure out how to change the color of the slider handles. What should I add to my CSS or header files to make the handles within my sliders turn green? Thanks!

  • http://www.petflow.com/ Pet Flow

    Incredible! I would give my left arm for a demo of the date range slider coupled to an event list that updates dynamically based on slider input!
    Great stuff! Thanks!

  • http://www.zweisitzer.amwarnowufer.de/default.aspx oldUwn

    Very useful. Tanks a lot! :)

  • http://www.chetaru.com/ Chetaru

    Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

  • http://Yourwebsite... Lalith

    Thanks for useful notes. In my case, my handle is 101 in width. When I slide, handle is moving out of Slider but not exactly stopping at the end of slider. How can I solve this?

  • http://Yourwebsite... Steve

    Is it also possible when someone enteres a value of 300 with the slider and click on next, that he will go to page 300?

  • http://www.facebook.com/people/Aleksy-Ruszała/100002987665374 Aleksy Ruszała
  • http://www.facebook.com/people/Aleksy-Ruszała/100002987665374 Aleksy Ruszała
  • Mario