Как добавить метки и метки на мобильный слайдер jquery?

Question

На моем горизонтальном слайдере я хочу показывать отметки через регулярные интервалы, скажем, 0,20,40,60,80 и 100. Также я хочу отображать эти значения в виде меток под слайдером. Я знаю, что это легко сделать с помощью слайдеров пользовательского интерфейса jquery, но я использую мобильный слайдер Jquery и не нашел никакой возможности сделать это.

Answer 1

Надеюсь, это поможет вам.

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