2

Подскажите, как добавить маркер к jquery.slider ?
введите сюда описание изображения

т.е. там где надпись 50км, как можно добавить этот блок?

1 ответ 1

4

Вот один из вариантов решения на основе документации, только нормально стилями подправить.

$(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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.