如何添加点以标记此滑块控件的每个步骤？

Question

我已经修改了Slider UI从jqueryUI，现在看起来是这样的： http://jsfiddle.net/eBukn/90/

.ui-slider-handle{ 
    -webkit-border-radius: 50%; 
    color: #ecf0f1 !important; 
    line-height: 40px !important; 
    top: -15px !important; 
    width: 40px !important; 
    height: 40px !important; 
    background:#16a085 !important; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
    border: none !important; 
    -webkit-transition:background .25s ease-in; 
    -moz-transition:background .25s ease-in; 
    -o-transition:background .25s ease-in; 
    transition:background .25s ease-in; 
    -webkit-backface-visibility: hidden !important; 
    cursor: pointer!important; 
} 

.ui-slider-handle:hover{ 
    background:#2fe2bf !important; 
} 

.ui-slider-handle:active{ 
    background:#16a085 !important; 
} 

.ui-slider-handle:focus{ 
    outline: none !important; 
} 

.ui-slider-range { 
    background:#1abc9c !important; 
    border: none !important; 
    -webkit-border-radius: 10px !important; 
} 

.ui-slider{ 
    -webkit-border-radius: 10px !important; 
    border: none !important; 
    background:#e8edf2 !important; 
} 

忘记的CSS，我做了一个快速的定制，也许它有一些错误......不管怎么说，我想要做的是在每个步骤中放入黑点，以便用户能够看到下一步的位置和数量。像在图像波纹管。

什么是做到这一点的最好方法是什么？ 首先，我想把元素与jquery重复n次（取消步骤数）。但可能是纯CSS的可能。

你有什么想法或建议吗？

Answer 1

可以吗？

http://jsfiddle.net/coma/V32MD/1/

CSS

.dots{ 
    width: 10px; 
    height: 10px; 
    background: black; 
    border-radius: 5px; 
    display: block; 
    position: absolute; 
    top: 2px; 
} 

JS

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

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

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

你可以用百分比的EM太：http://jsfiddle.net/coma/V32MD/2/