0

i have a jquery slider control with a tooltip. user can either slide to change value which adjusts the tooltip, or the user can enter the value in the textbox and the slider and tooltip should adjust value in the textbox.

see attached 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
    });

following code adjusts the value of slider but not cause tooltip value to be reflected to current slider value.

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

any help would be appreciated.

thks ken

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

整个滑块现在看起来像这样（如您所见，工具提示仅在 create 上设置一次）： 

$(".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

您的小提琴中有太多错误，应该是：

$('#t1').change(function () {
    var value = $('input#t1').val();
    $("#slider1").slider("option", "value", parseInt(value, 10));
    sliderTooltip();
});

编辑：添加change事件以更新句柄值：

change: function (event, ui) {
    $(".tooltip-inner", this).html(ui.value);  /*thanks rusIn */

您还可以添加以下内容以slide:反映输入字段中的更改：

$('#t1').val(ui.value);

见工作小提琴

于 2013-06-24T01:34:09.270 回答
0

你必须调用你的函数，尝试改变：

sliderTooltip;

至：

sliderTooltip();
于 2013-06-24T01:24:08.483 回答