自定义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")

玉文件^

所以基本上我有滑块工作。我试图在滑块上添加像圆圈/圆点一样的东西。因此，您可以沿滑块将其拖动到其中每个。点会影响页面上的某些内容。但我在文档中找不到任何类似的东西，有人可以帮忙吗？谢谢。

Answer 1

请参阅此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>");
}