如何向 jquery 移动滑块添加刻度线和标签？

【问题标题】：How to add tick marks and labels to jquery mobile slider?如何向 jquery 移动滑块添加刻度线和标签？
【发布时间】：2014-02-01 23:53:27
【问题描述】：

在我的水平滑块上，我想定期显示刻度线，例如 0、20、40、60、80 和 100。我还想将这些值显示为滑块下方的标签。我知道使用 jquery UI 滑块可以轻松完成，但我使用的是 Jquery 移动滑块，但没有找到任何选项。

【问题讨论】：

标签： jquery jquery-mobile jquery-mobile-slider

【解决方案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;
}

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

DEMO

【讨论】：