如何添加刻度線和標籤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()); 
}); 

DEMO