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 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?