customize jquery ui slider

Question

$(document).ready(function(){

  var axis = $('.selector').draggable('option', 'axis');

      $("#draggable").draggable({ axis: 'x' });
      $('.selector').draggable('option', 'axis', 'x');

Js file ^

  div.slider
    input(type="range" name="slider-1" id="slider-1" value="10" min="0" max="200" data-highlight="true")

Jade file ^

So basically I have the slider working. I'm trying to add like circles/dots along the slider. So you can drag it to each of these along the slider. The dots will influence something on the page. But I can't find anything in the documentation about anything like this, can someone help? Thank you.

Answer 1

Refer this jsfiddle

var tot = total - 1;
var mar = $( ".ui-slider" ).width() / tot;

for (var x = 0; x < tot; x++){

    $(".ui-slider" ).append("<span class='dots' style='left:"+ x * mar + "px'></span>");
}