Using the jQuery UI Slider

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