1

次のコードをテンプレートとして使用している2つのjquery-uiスライダーが必要です

http://jsfiddle.net/9qwmX/2/

2 番目のスライダーを追加すると、両方のツールチップの値は最新のスライダーの値であり、個別のスライダーではありません。コードは、影響を受けるスライダーだけでなく、すべてのスライダーに反映される var ツールリップを定義します。

                         var initialValue1 = 2012; // initial slider value
                    var sliderTooltip1 = function (event, ui) {
                        $('#amount1').val(ui.value);
                        var curValue1 = ui.value || initialValue1;
                        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 + '</div><div class="tooltip-arrow"></div></div>';
                        $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
                    }


                    $('#slider1').slider({
                        value: 100,
                        min: 0,
                        max: 500,
                        step: 1,
                        create: sliderTooltip1,
                        slide: sliderTooltip1
                    });
                    $('#amount1').val($('#slider1').slider('value'));

                    $('#amount1').change(function () {
                        var value = this.value;
                        //         var value = this.value.substring(1);
                        console.log(value);
                        $("#slider1").slider("value", parseInt(value));
                    });

注 - これは単純なスライダーであり、範囲スライダーではありません。

ツールチップの値を個別の正しい値にする方法を教えてください。任意の助けをいただければ幸いです。

ありがとうケン

4

1 に答える 1

1

クラス .ui-slider-handle のすべての要素を対象としていたため、対象を指定する必要があります。

http://jsfiddle.net/9qwmX/494/

var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue;
    var target = ui.handle || $('.ui-slider-handle');                                     
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
   $(target).html(tooltip);
}
于 2013-05-29T13:52:32.207 に答える