如何在它下面的另一个div中显示多个jQuery Slider步骤

Question

我的问题与一年前提到的问题有关:

有没有办法在jquery ui滑块中显示"ticks"或"steps"的数量？

该问题中的OP想知道如何根据滑块中的刻度位置添加可视步骤.该解决方案是手动的,不适用于动态滴答方法.

我的问题是,如果我在加载时加载了多个滑块,每个滑块都有不同的步骤,并且在任何时间点,步骤的数量都可能会发生变化.我可能忽略了滑块API中的任何内容,可以将其用作步骤div的参考回调,让它知道每个步骤的位置.

例如,如果其中一个步骤是"left:28%".该信息在初始化后是否存储在滑块中的任何位置,是否可以在其下方创建动态步骤视觉效果？

Answer 1

此代码将根据您的最大值和步长值创建可视步长。它将在多个滑块上工作，并且视觉步骤是在滑块创建事件上创建的。如果您更改事件或其他内容的步长值，您只需清除标签 div 并重新运行创建函数即可。

您仍然需要根据您想要的外观来设置 div 的样式。

希望这可以帮助！

jsFiddle

网页

<div class="slider-holder">
  <div class="slider"></div>
  <div class="slider-labels"></div>
</div>

CSS

.slider-holder {
  width:500px;
  height:50px;
  margin:auto;
}
.slider-labels {
   position:relative;
}
.slider-labels span {
  position:absolute;
  color:#000;
}

JavaScript

$( ".slider" ).slider({
  min: 0,
  max: 100,
  step: 10,
  create : function(event,ui) {
    var maxValue = $(this).slider("option","max");
    var stepValue = $(this).slider("option","step");
    var steps = maxValue/stepValue;
    for(i=0;i<=steps;i++) {
      var val = stepValue*i; 
      $(event.target).next().append('<span style="left:'+val+'%;">'+val+'</span>');
    }
  }
});