ツールチップを含むJquery Rangeスライダ

Question

最小値と最大値をフィルタリングするために、レンジスライダ（スライダの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(); 
    });