टूलटिप

Question

के साथ Jquery रेंज स्लाइडर मैं न्यूनतम और अधिकतम मानों को फ़िल्टर करने के लिए रेंज स्लाइडर (स्लाइडर्स पर 2 हैंडल) के साथ Jquery Ui का उपयोग कर रहा हूं। हालांकि, किसी भी विचार को दोनों हैंडल के लिए टूलटिप जोड़ने का तरीका है, क्योंकि स्लाइडर स्वयं स्लाइडर के साथ टूलटिप का समर्थन नहीं करता है।

Answer 1

बाद स्लाइडर आप बस

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

Answer 2

.ui-slider-handle वर्ग हैंडल पर एक टूलटिप विजेट बना सकते हैं लोड किया गया है दो आइटम जब एक सीमा के रूप में इस्तेमाल किया है। इसलिए आपको न्यूनतम और अधिकतम रेंज हैंडलर प्राप्त करने के लिए .first() और .last() विधियों का उपयोग करना चाहिए।

यहाँ jsFiddle example है।

यह इस 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(); 
    });