Кастомизация Slider UI

by Евгений

HTML

<div id="slider"></div>

CSS

#slider label {
    position: absolute;
    width: 20px;
    margin-left: -10px;
    text-align: center;
    margin-top: 20px;
}
#slider {
    width: 50%;
    margin: 2em auto;
}

JavaScript

$( "#slider" ).slider({
    min: 1,
    max: 5,
    step: 1,
    value: 3,
    range: "min",
    animate: "fast",
})
.each(function() {
  var opt = $(this).data().uiSlider.options;
  var vals = opt.max - opt.min;
  for (var i = 0; i <= vals; i++) {
    var el = $('<label>'+(i+1)+'</label>').css('left',(i/vals*100)+'%');  
    $( "#slider" ).append(el);
  }
});