jQuery UI Range Slider - Tooltips for each handle

I'm using a jQuery Range slider to let users select a time range in a day (i.e. 10:00 - 18:00).

At the moment it's all working fine and I have the output being displayed in a text box but this isn't ideal. I would prefer to have an individual tooltip for each handle that display the 2 values seperately and that follow the handle when you drag it. Failing that I could put the time in the slide handle itself.

My problem is - how do I target an specific handle? They dynamically created by jQuery and are defined only by classes so I don't know how I'd go about linking a div to a specific handle.

I had a search on here and found some similar questions but nothing that really answered this.

Also, I don't want to use a plugin. I know one or two exist but as this is only happening on one place on the site I'd rather not have to include a file for something that should be fairly simple开发者_高级运维 (even if it has beaten me :P)

---

I know this is a bit old, but i think other people might find my solution of interest (or tell me why its rubbish at least).

I basically used JQuery to insert a span element inside the a element that is used for the handle on the slider. The content of the span is then updated every time the handle is moved using the slider's change event. The span itself is styled using css so that it only shows up when hovering over the handle and is slightly above the handle itself. so it looks something like this:

so, my sliders are added to all elements with the slider-range class like this:

$(".slider-range").each(function () {
    $(this).slider({
        range: true,
        animate: true,
        min: 1,
        max: 10,
        values: [lower, upper],
        change: function () {

            // get slider values
            var lower = $(this).slider("values", 0);
            var upper = $(this).slider("values", 1);

            // update spans with slider values
            $(this).children("a.ui-slider-handle").first().children("span").html(lower);
            $(this).children("a.ui-slider-handle").last().children("span").html(upper);
        }
    });

    // add the span element to the handle
    $(this).children("a.ui-slider-handle").html("<span class='Slider_Value'></span>");
});

and then the css looks like this:

a.ui-slider-handle span.Slider_Value{
    position: absolute;
    top: -35px;
    left: -2px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

a.ui-slider-handle:hover span.Slider_Value{
    display: block;
}   

And thats all! enjoy

---

If you just need to access each value independently, you can attach the slide function to update each target seperately. Additionally, if you want to be able to change the slider from each of those 2 targets seperately, that works just as easily with the values method.

EDIT

Guess I misunderstood your question a bit. You can get the handlers and their positions with some selectors, such as:

var offset1 = $(this).children('.ui-slider-handle').first().offset();
var offset2 = $(this).children('.ui-slider-handle').last().offset();

Below is an example how you could use that information to display tooltips over those items when dragged.

Example: http://jsfiddle.net/niklasvh/vW7vy/

---

Nice efforts but it dsn't work perfect. When you mouse hover the handle for first time. It dsnt show default values. Try this one with same CSS style.

$(function() {
            var tooltip = function(sliderObj, ui){
                val1            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 0) +'</div>';
                val2            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 1) +'</div>';
                sliderObj.children('.ui-slider-handle').first().html(val1);
                sliderObj.children('.ui-slider-handle').last().html(val2);                  
            };

            $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( e, ui ) {
                tooltip($(this),ui);                    
              },              
              create:function(e,ui){
                tooltip($(this),ui);                    
              }
            });
        });