Search code examples
jqueryjquery-uijquery-ui-slider

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)

Solution

  • 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/