如何添加点来标记此滑块控件的每一步？

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>");
}

您也可以使用百分比：http://jsfiddle.net/coma/V32MD/2/