Custom Range Slider With Ticks

I am trying to find a library for custom input range sliders that meet the following criteria:

  1. Must have tick marks.
  2. Must be able to work vertically.
  3. IE11 Compatible.

I have not been able to find a library to meet all of these standards. If anyone knows of one please refer me to it.
Thank you

I found it wasn’t too difficult to add ticks to a jQuery UI Slider.

function setSliderTicks(el) {
    var $slider =  $(el);
    var max =  $slider.slider("option", "max");    
    var min =  $slider.slider("option", "min");        
	var step = $slider.slider("option", "step");
	var spacing =  100/((max - min)/step);

    $slider.find('.ui-slider-tick-mark').remove();
    for (var i = 0; i < ((max-min)/step) ; i++) {
        $('<span class="ui-slider-tick-mark"></span>').css('top', (spacing * i) +  '%').appendTo($slider); 
     }
}
  </script>
  <style>
  .ui-slider-tick-mark{
display:inline-block;
width:16px;
background:black;
height:1px;
position:absolute;
left:-2px;
  }</style>

(Original basis for code comes from here, morphed slightly to work with a vertical bar with steps.)

You can also try noUiSlider. I used it in the past and it’s pretty easy. It’s pretty robust, it has no dependencies and it works for IE >9.

2 Likes

Thank you for the response this was very helpful

Thank you very much!

This is the ticket! Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.