在jQuery滑块上添加刻度线? [重复]

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在jQuery滑块上添加刻度线? [重复]相关的知识,希望对你有一定的参考价值。

这个问题在这里已有答案:

如何在jQuery滑块上添加刻度线?假设我有1到10的值,我怎么能在每个值上添加勾号?

我在S.O.上看过类似的帖子。但他们都建议使用插件,我想通过与其他元素进行大量交互来对其进行硬编码。

谢谢!

答案

Similar to this SO Question。 Mortimer的答案可能有所帮助。

虽然还没有正式的方法,但是在jQuery UI滑块中加入它会很不错。

另一答案

谢谢Code-Toad。我修改了你的代码以使用百分比而不是像素,所以现在它不受窗口调整大小的影响:

使用javascript

function setSliderTicks(){
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  100 / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}

CSS:

.ui-slider-tick-mark{
    display:inline-block;
    width:2px;
    background:black;
    height:16px;
    position:absolute;
    top:-4px;
}
另一答案

感谢Arie Livshin和CodeToad。前面的代码假设最小值始终为1.我编辑了代码以使用最小值。

$("#users-slider").slider(
  {
    range: "min",
    value: 3,
    min: 3,
    max: 6,
    create: function( event, ui ) {
      setSliderTicks(event.target);
    },
  }
);

function setSliderTicks(el) {
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");    
    var spacing =  100 / (max - min);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < max-min ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}
另一答案

假设滑块间隔= 1,这是一个简单的解决方案。

function setSliderTicks(){
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  $slider.width() / (max -1);

    $slider.find('.ui-slider-tick-mark').remove();
        for (var i = 0; i < max ; i++) {
            $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + 'px').appendTo($slider);                    
        }
}


.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:black;
height:16px;
position:absolute;
top:-4px;
}
另一答案

您可以使用在正确位置具有标记的背景图像 - 这可能是最简单的方法。

以上是关于在jQuery滑块上添加刻度线? [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WPF C# 中更改滑块上刻度的设计(刻度的厚度、刻度的形状等)

将 UIImage 作为“刻度线”添加到 UISlider

自定义 jquery 移动滑块标签

在 iOS 滑块上,我可以单击刻度上的任意位置还是必须拖动滑块旋钮?

通过jquery滑块发送获取请求并在页面重新加载后保持滑块上的值[重复]

在 Nivo 滑块上播放/暂停按钮