0

ツールチップ付きの jquery スライダー コントロールがあります。ユーザーはスライドしてツールチップを調整する値を変更するか、テキストボックスに値を入力してスライダーとツールチップでテキストボックスの値を調整することができます。

添付の jfiddle http://jsfiddle.net/k2sarah/caUku/2/を参照してください。

<div id='slider'></div>
<div id='slider2'></div>
<input id='t1' type='text' />       


var initialValue = 2012;

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


 }

    $('#t1').change(function () {
    var value = $('input[id$=t1]').val();
    $("#slider").slider("value", parseInt(value));
                    sliderTooltip;
    });

    $("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip


 });

    var sliderTooltip1 = function(event, ui) {
        var curValue1 = ui.value || initialValue;
         var target = ui.handle || $('.ui-slider-handle');
        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 +  
        '</div><div class="tooltip-arrow"></div></div>'; $(target).html(tooltip);
    }

    $("#slider2").slider({
        value: initialValue,
        min: 1955,
        max: 2015,
        step: 1,
        create: sliderTooltip1,
        slide: sliderTooltip1
    });

次のコードは、スライダーの値を調整しますが、ツールチップの値が現在のスライダーの値に反映されることはありません。

$('#t1').change(function () {
var value = $('input[id$=t1]').val();
$("#slider").slider("value", parseInt(value));
                sliderTooltip;
});

任意の助けをいただければ幸いです。

ありがとうケン

4

3 に答える 3

1

ここに解決策があります：jsFiddle

これにより、スライダーの変更イベントがトリガーされます。

$('#t1').change(function () {
        var value = $(this).val();
        $(".slider").slider("value", parseInt(value));
    });

ここで、スライダー内の変更イベントをリッスンする必要があります:

 change: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        }

スライダー全体は次のようになります (ツールチップが作成時に一度だけ設定されていることがわかります): 

$(".slider").slider({
        value: initialValue,
        min: 1955,
        max: 2015,
        step: 1,
        create: sliderTooltip,
        slide: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        },
        change: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        }
    });
于 2013-06-25T13:33:35.800 に答える
0

関数を呼び出す必要があります。次のように変更してみてください。

sliderTooltip;

に：

sliderTooltip();
于 2013-06-24T01:24:08.483 に答える