Jquery Range Slider mit Tooltip

Question

Ich benutze Jquery Ui mit Bereich Schieberegler (2 Griffe auf Slidern), um minimale und maximale Werte zu filtern. Allerdings, jede Idee, wie Tooltip für beide Handle hinzufügen, da der Schieberegler selbst Tooltip mit Schieberegler nicht unterstützt.

Answer 1

Nachdem der Schieber geladen ist Sie könnten einfach einen Tooltip-Widget auf dem

$('.ui-slider-handle').tooltip(); 

Answer 2

.ui-slider-handle Klasse Handles erstellt hat zwei Elemente, wenn als Bereich verwendet. Daher müssen Sie die Methoden .first() und .last() richtig verwenden, um Min- und Max-Range-Handler zu erhalten.

Hier ist die jsFiddle example.

Dies ist die modifizierte Version der Antwort dieser question:

var tooltipmin = $('<div id="tooltip" />').css({ 
    position: 'absolute', 
    top: -25, 
    left: -10 
}).hide(); 
var tooltipmax = $('<div id="tooltip" />').css({ 
    position: 'absolute', 
    top: -25, 
    left: -10 
}).hide(); 
var slideritem = $("#slider").slider({ 
    values: [350, 500], 
    min: 0, 
    max: 1000, 
    step: 50, 
    range: true, 
    slide: function(event, ui) { 
     tooltipmin.text(ui.values[0]); 
     tooltipmax.text(ui.values[1]); 
    }, 
    change: function(event, ui) { 
     tooltipmin.text(ui.values[0]); 
     tooltipmax.text(ui.values[1]); 
    } 
}); 
slideritem 
    .find(".ui-slider-handle") 
    .first() 
    .append(tooltipmin) 
    .hover(function() { 
     tooltipmin.show(); 
     tooltipmax.show(); 
    }, function() { 
     tooltipmin.hide(); 
     tooltipmax.hide(); 
    }); 
slideritem 
    .find(".ui-slider-handle") 
    .last() 
    .append(tooltipmax) 
    .hover(function() { 
     tooltipmin.show(); 
     tooltipmax.show(); 
    }, function() { 
     tooltipmin.hide(); 
     tooltipmax.hide(); 
    });