How to add dots to mark each step of this slider control?

Problem

I've modified the Slider UI from jqueryUI and now looks like this: 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;
}

Forget the css, I did a quick customization and perhaps it has some mistakes... Anyway, what I'm trying to do is put black dots in each step so the user'll be able to see where will be the next step and the amount of it. Like in the image bellow.

Here is a simulation

What would be the best way to do it? First I thougth to put and element with jquery and repeat it n times (deppending the number of steps). But may be it's possible to do with pure CSS.

Do you have any idea or advice?

Problem courtesy of: harrison4

Solution

Is this ok?

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

You can use percentage an em's too: http://jsfiddle.net/coma/V32MD/2/

Solution courtesy of: coma

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.