Question

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

Is there a way to show the number of "ticks" or "steps" in a jquery ui slider?

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

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

例如，如果其中一个步骤为“left：28％”。该信息在初始化后是否存储在滑块中的任何位置，是否可以在其下方创建动态步骤视觉效果？

Answer 1

此代码将根据您的最大值和步长值创建可视步骤。它将在多个滑块上工作，并在滑块创建事件上创建可视步骤。如果更改事件或某事的stepvalue，您只需清除标签div并重新运行create function。

你仍然需要根据你想要的样子来设置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>');
    }
  }
});

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

1 个答案: