Подскажите, как добавить маркер к jquery.slider ?
т.е. там где надпись 50км, как можно добавить этот блок?
Вот один из вариантов решения на основе документации, только нормально стилями подправить.
$(function() {
var handle = $("#custom-handle .value-output");
$("#slider").slider({
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
position: relative;
}
.value-wrapper {
display: block;
position: absolute;
top: 34px;
left: -4px;
border: 1px solid grey;
right: -13px;
color: #000000;
}
.value-wrapper::before {
content: '';
position: absolute;
display: block;
left: 20px;
top: -16px;
border: 5px solid transparent;
border-bottom: 10px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"><span class="value-wrapper"><span class="value-output"></span> км/ч</span>
</div>
</div>