javascript - ツールチップ付きのJquery Rangeスライダー

Question

範囲スライダー (スライダーの 2 つのハンドル) で Jquery Ui を使用して、最小値と最大値をフィルター処理しています。ただし、スライダー自体はスライダー付きのツールチップをサポートしていないため、両方のハンドルにツールチップを追加する方法はありません。

Answer 1

.ui-slider-handle範囲として使用する場合、class には 2 つの項目があります。.first()したがって、最小および最大範囲ハンドラーを取得するには、メソッドと.last()メソッドを適切に使用する必要があります。

これがjsFiddle の例です。

これは、この質問の回答の修正版です。

    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();
    });