Thanh trượt Jquery Range với chú giải công cụ

Question

Tôi đang sử dụng Jquery Ui với thanh trượt phạm vi (2 tay cầm trên thanh trượt) để lọc các giá trị tối thiểu và tối đa. Tuy nhiên, bất kỳ ý tưởng làm thế nào để thêm tooltip cho cả hai xử lý, kể từ khi thanh trượt chính nó không hỗ trợ tooltip với thanh trượt.

Answer 1

Sau khi thanh trượt đã được tải bạn chỉ có thể tạo ra một widget tooltip trên tay cầm

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

Answer 2

.ui-slider-handle lớp có hai mục khi được sử dụng như một loạt. Do đó, bạn phải sử dụng các phương thức .first() và .last() đúng cách để có được các trình xử lý phạm vi tối thiểu và tối đa.

Đây là jsFiddle example.

Đây là phiên bản sửa đổi của câu trả lời này 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(); 
    });