Suwak Jquery Range z podpowiedzką

Question

Używam Jquery Ui z suwakiem zasięgu (2 uchwyty na suwakach) do filtrowania wartości minimalnych i maksymalnych. Jednak każdy pomysł, jak dodać etykietkę dla obu uchwytów, ponieważ sam suwak nie obsługuje etykietki z suwakiem.

Answer 1

Po suwak został załadowany można po prostu utworzyć widget podpowiedzi na uchwytach

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

Answer 2

.ui-slider-handle klasa ma dwa elementy stosowane w postaci zakresu. Dlatego musisz poprawnie używać metod .first() i .last(), aby uzyskać obsługę min i max zakresów. Jest to jsFiddle example.

Jest to zmodyfikowana wersja odpowiedzi na ten 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(); 
    });