Jquery UI滑块如何使一个框跟随处理程序？

Question

我正在尝试创建一个应该遵循处理程序的div,如下所示:http://m1.dk/Priser/#tab:# calc,#abb

我的JSfiddle:http://jsfiddle.net/z3xV3/2/

我还想对应该出现在框中的UI值进行计算.

以下是我想要实现的内容:

HTML:

<div id="slider"></div>
<input id="sliderValue" />

jQuery的:

$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#amount" ).html( ui.value + ' timer');
    }
});

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );


});

Answer 1

我希望你正在寻找的效果:http://jsfiddle.net/z3xV3/11/

JS

$(document).ready(function() {

    $("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});

    var thumb = $($('#slider').children('.ui-slider-handle'));   
    setLabelPosition();    

    $('#slider').bind('slide', function () {        
        $('#sliderValue').val($('#slider').slider('value'));
        setLabelPosition();
    });

    function setLabelPosition() {
        var label = $('#sliderValue');
        label.css('top', thumb.offset().top + label.outerHeight(true));
        label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);  
    }

});

HTML

<div id="slider"></div>
<input id="sliderValue" />

CSS

#sliderValue {
    position:absolute;
    width: 50px;
}

最好的祝福!

Answer 2

我修改了你的jsfiddle例子:http://jsfiddle.net/Dr5UR/

$("#amount").val("$" + $("#slider").slider({
    slide: function(event, ui) {
        $('#sliderValue').css('left', event.clientX).val(ui.value);
    }
}));

我利用了滑块的滑动事件.

幻灯片事件有两个参数:

1. 事件

   该对象包含有关事件本身的几个信息.触发时间,按下的键或触发时鼠标的坐标.该clientX属性包含我们需要设置到移动物体的位置.

2. UI

   ui对象来自jQuery UI本身.它基本上只包含值.此外,它还包含用于拖动的锚点.但是你不能使用它的位置,因为滑动事件在锚定新位置之前生效.

该#slideValue输入需要有position: absolute;,因为我在CSS左侧位置属性工作.您也可以设置margin-left值,而无需设置position为absolute.