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

Question

在我的水平滑块上，我想定期显示刻度线，例如 0、20、40、60、80 和 100。我还想将这些值显示为滑块下方的标签。我知道使用 jquery UI 滑块可以轻松完成，但我使用的是 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());
});

演示