Presenting indicators and milestone labels for ui slider bar

Using HTML & JavaScript

I created a slide bar which successfully responds both ways with a select option. However i have choosen to 'hide' the select option box. I was wondering if anyone could give me any tips on creating labels for the slider bar as the user now has no idea what they are selecting. Examples i have found show perfect indicators, milestone numbers and floating numbers when hovering over yet everything is slide bar related and rather than labels. Help!

My JavaScript Slider Bar Code

        $(function() {
            var select = $( "#logbytes");
            var slider = $( " <div id='slider'>&开发者_JS百科lt;/div>").insertAfter(select).slider({
                min: 1,
                max: 6,
                step: 1,
                value: select[0].selectedIndex + 1, 
                slide: function(event, ui) {
                    select[0].selectedIndex = ui.value - 1;
                }
            });

            $('#logbytes').after(slider).hide();
        });

---

The basic idea is to wrap your slider inside a wrapper div. Then to add another div inside the wrapper. Its text will be the current value of the slider.

And then the only thing left to do is to move that div around and to update it's text. It's something like:

slide: function(event, ui) {
    $( ".amount" ).text( ui.value );
    $( ".amount" ).css("margin-left",(ui.value-min)/(max-min)*100+"%");
}

Where min and max are the min and max of your slider.

See http://jsfiddle.net/WYdLF/ for an example.