如何添加點以標記此滑塊控件的每個步驟？

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/