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

Question

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

是否有一种方法可以显示"打勾"的数量?或";steps"在一个jquery UI滑块?

该问题中的OP想知道如何根据滑块中刻度的位置添加视觉步骤。解决方案是手动的，不能与动态标记方法一起工作。

我的问题是，如果我有多个滑动条加载，每个滑动条都有不同的步骤，并且在任何时间点，步骤的数量可能会改变。滑块API中是否有任何我可能忽略的东西，可以用作步骤div的引用回调，让它知道每个步骤的位置。

例如，如果其中一个步骤位于"left: 28%"。信息是否存储在滑块初始化后的任何地方，是否可以访问它以在其下方创建动态步骤视觉效果?

Answer 1

此代码将根据您的最大值和步长值创建可视化步骤。它将在多个滑块上工作，并且在滑块创建事件上创建可视化步骤。如果您更改了事件或其他东西的步骤值，您可以简单地清除标签div并重新运行create函数。

你仍然需要根据你想要的效果来设置div的样式。

希望这对你有帮助!

jsFiddle

Html

<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>');
    }
  }
});