How to add tick marks and labels to jquery mobile slider?

Question

On my horizontal slider I want to show tick marks at regular intervals say 0,20,40,60,80 and 100. Also I want to display these values as labels below the slider. I know it can be done easily using jquery UI sliders but I am using Jquery mobile slider and didn't find any option to do so.

Answer 1

Hope this helps you.

HTML

<form class="full-width-slider">
    <label for="slider-12" class="ui-hidden-accessible">Slider:</label>
    <input type="range" name="slider-12" id="slider-12" min="0" max="100" value="0" step="20"/>
    <label id="slider-value">0</label>
</form>

CSS

/* Hide the number input */

.full-width-slider .ui-slider-track {
    margin-left: 15px;
}

.full-width-slider input.ui-slider-input {
    display: none;
}

JS

$( "#slider-12" ).slider().change(function() {
    $('#slider-value').text($('#slider-12').val());
});

DEMO