Show numbered intervals above jQuery slider

Question

Hallo,

I've added a jQuery slider and now I want to have numbers above the slider which denotes the intervals. Almost like a everyday ruler. Does anyone have a quick method to accomplish this?

Answer 1

I use this code.
img/current.png - path to current image ,when i press on Click)

function setSlider(selected) {
 $('.slider_item > img').remove();
 $(selected).html('<img src="img/current.png">'+$(selected).html());
 } 



 <div class="line">
        <span onclick="setSlider(this);" class="slider_item left">
            0.5
        </span><span onclick="setSlider(this);" class="slider_item middle">
            1
        </span><span onclick="setSlider(this);" class="slider_item middle">
            2
        </span><span onclick="setSlider(this);" class="slider_item middle">
            4
        </span><span onclick="setSlider(this);" class="slider_item middle">
            8
        </span><span onclick="setSlider(this);" class="slider_item middle">
            16
        </span><span onclick="setSlider(this);" class="slider_item right">
            32
        </span>
    </div>

Answer 2

Have a look at this jQuery UI plugin: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

It's actually a more sophisticated version of the jQuery UI slider created by the same people that sponsors jQuery UI. However this uses the select HTML element instead of lists, so you may want to strip out the tic adding function from the plugin and use that instead (not easy, but it's better than writing your own I hope!).

This is what the plugin uses:

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
    var labelText = (options.labelSrc == 'text') ? this.text : this.value;
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});

For every option element it adds a tic, with a label added by another block of code further down. What it's doing is basically injecting a list of spans into the slider element, with the text taken directly from the element's value attribute. You'll also need quite a bit of CSS to style that properly into tics.