How to show multiple jQuery Slider steps in another div below it

Question

My question relates to this one asked a year ago:

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

The OP in that question wanted to know how to add visual steps based on where ticks in the slider are located. The solution was a manual one and would not work with a dynamic tick approach.

My question is what if I have multiple sliders loading on load, each one with different steps and at any point in time, the number of steps could change. Is there anything in the slider API that I may have overlooked that could be used as reference callbacks to the step div, letting it know where to position each step.

For example, if one of the steps is at "left: 28%". Is that info stored anywhere in the slider after it initializes and can it be accessed to create dynamic step visuals below it?

Answer 1

This code will create visual steps depending on your max value and step value. It will work on multiple sliders and the visual steps are created on the slider create event. If you change the stepvalue on an event or something, you can simply clear the labels div and rerun the create function.

You will still need to style the divs depending on how you want it to look.

Hope this helps!

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