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());
});

<强> DEMO

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

1 个答案: