5

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?

Community
  • 1
  • 1
spez86
  • 732
  • 1
  • 11
  • 24
  • If I rely on animate, wouldn't that only be based on an event? Therefore, wouldn't I only be able to visually represent the ticks while the slider is being interacted with and not right after the init occurs? – spez86 Jan 15 '13 at 15:17
  • My bad - ignore me. I was thinking you meant something completely different :p – Reinstate Monica Cellio Jan 15 '13 at 15:23
  • No worries man. I'm starting to think that the only way I can do it is setup my own calculations based on 100% width / ((# of steps) - 1) in the slider above. It looks like that's how it does it by default so I guess the best way would be to recreate that below. Thanks for trying anyway. I'll leave this open in case anyone comes up with a better solution. – spez86 Jan 15 '13 at 15:31
  • I was coming up with a solution based on the same principle you've written in your comment. I think you should do it, and once the code is ready, answer your own question... even if noone will have a better answer, you will resolve the problem for people in the future. Actually it is not a bad solution, even if a lot *manual*... – Andrea Ligios Jan 15 '13 at 15:35
  • If I'm understanding you now, all you need are the values `$(".selector").slider("option", "step");` and the width – Reinstate Monica Cellio Jan 15 '13 at 15:43

1 Answers1

0

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>');
    }
  }
});
Bror
  • 1,395
  • 9
  • 9
  • Ha, this is pretty much exactly what I did. Didn't have time to add the answer here, and you beat me to it, so I'll give it to you! Thanks for taking the time in writing this out! – spez86 Feb 06 '13 at 15:43