0

$(document).ready(function() {
  $("#slider").slider({
    min: 0,
    max: 2000,
    step: 1000,
    value: 0,
    animate: 'slow',
    range: "min"
  });
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>

слишком резко он переходить между шкалами

1 ответ 1

1

Свойство animate в jQuery UI Slider позволяет анимировать бегунок только при клике на шкале. Но вот таким небольшим трюков можно добавить анимацию при перемещении бегунка мышью.

$("#slider").slider({
  min: 0,
  max: 2000,
  step: 1000,
  value: 0,
  animate: 'slow',
  range: "min"
});

$('#slider span').on('mousedown mouseup', function() {
  $(this).closest('#slider').toggleClass('animated');
});
#slider.animated .ui-slider-handle {
  transition: left 0.5s linear;
}

#slider.animated .ui-slider-range {
  transition: width 0.5s linear;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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