jquery滑块，上面的值与滑块一起移动

Posted 2023-03-13

【中文标题】jquery滑块，上面的值与滑块一起移动

【英文标题】：jquery slider with value above it which travels with the slider

【发布时间】：2012-06-19 11:12:45

【问题描述】：

我用查询/滑块制作了一个滑块，并用 css 设置了它的样式。 (http://jsfiddle.net/9qwmX/)

我成功将选中的值放入了一个div容器中；但现在我希望容器相应地与滑块一起“旅行”。 我尝试使用 ui.handle 及其 css left 属性，这是一个百分比。但是这种行为有点奇怪：有时它会随着滑块的左侧移动，有时会偏移 10px。

问题：有没有人知道让包含滑动值的盒子随手柄一起移动的好方法？

【问题讨论】：

类似jsfiddle.net/joycse06/Cw6u8/1

【参考方案1】：

您可以附加一个类似于工具提示的 div，您可以将其附加到句柄上，以便它随之移动。你只需要用 CSS 定位它，如下所示：

JS

var initialValue = 2012; // initial slider value
var sliderTooltip = function(event, ui) 
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle


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

CSS ^{从 twitter 引导框架借用的工具提示}

.tooltip 
    position: absolute;
    z-index: 1020;
    display: block;
    padding: 5px;
    font-size: 11px;
    visibility: visible;
    margin-top: -2px;
    bottom:120%;
    margin-left: -2em;


.tooltip .tooltip-arrow 
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #000000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    position: absolute;
    width: 0;
    height: 0;


.tooltip-inner 
    max-width: 200px;
    padding: 3px 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

演示：http://jsfiddle.net/9qwmX/2/

【参考方案2】：

你可以做这样的事情来构建你想要的东西，我正在使用event.pageX

var newLeft = 100;
$('#move').text(100).css('margin-left',115);
$("#slider").slider(

            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) 
                $( "#slider-value" ).html( ui.value );
                var  pos = (event.pageX > newLeft)? event.pageX + 8 
                                                  : event.pageX - 42;
                newLeft = event.pageX;                
                $('#move').text(ui.value).css('margin-left',pos);
            

);

演示： http://jsfiddle.net/joycse06/Cw6u8/1/

【参考方案3】：

这就是我会做的。为了让您开始：

利用“手柄”位置：

var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset();
var offsetLeft = offset.left;
var offestTop = offset.top;

用绝对定位来定位你的滑动值框：

#tijdlijnDatum  position: absolute; 

并在slide 事件中使用它：

$( "#slider" ).slider(
   slide: function(event, ui)  

       $('#tijdlijnDatum').css( left: offsetLeft + 'px'  ); // etc
   
);