Jquery UI滑块如何使一个框跟随处理程序？ [英] Jquery UI slider how to make a box follow the handler?

问题描述

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

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

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

以下是我想要实现的图示：
< img src =https://i.stack.imgur.com/mYXWA.pngalt =在此处输入图像说明>

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 +'计时器'）; 
} 
}）; 
 
 $（＃amount）。val（$+ $（＃slider）.slider（ value））; 
 
 
}）; 
  

解决方案

我希望你能找到的效果如下： 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（）; 
}）; 
 
函数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; 
宽度：50px; 
} 
  

祝你好运！

I am trying to create a div that should follow the handler as it is seen here: http://m1.dk/Priser/#tab:#calc,#abb

My JSfiddle: http://jsfiddle.net/z3xV3/2/

I also want to make a calculation on the UI value that should appear in the box.

Here is a illustration what I want to achieve:

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


});

解决方案

I hope that's the effect you're looking for: 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;
}

Best regards!

这篇关于Jquery UI滑块如何使一个框跟随处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！