Различные значения в JQuery UI Slider

Question

Можно ли создавать собственные шаги в слайдере пользовательского интерфейса jquery?Например, у меня есть 5 шагов: 0, 1200, 2000, 2200 и 3000. Кто-нибудь знает, как это сделать?

const rangeSliderInit = () => {
const valueArray = [0, 400, 1000, 1500, 2000, 3000, 420
$(".slider").slider({
value: 400,
min: 0,
max: 4200,
});
}

Answer 1

Это просто вопрос отображения правильного значения (в реальности это может быть что-то другое).

Создание массива значений.Установите максимальное значение для количества опций в вашем массиве и шаг 1.

Здесь я просто делаю ползунки min = 0 и max = 4 с шагом 1.

Вы можете использоватьразмеры [ui.value] как ваше значение слайдера.

При изменении значения ползунка

var sizes = [0, 1200, 2000, 2200, 3000];
$("#slider").slider({
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $("#slider-value").text(sizes[ui.value]);
  }
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h1>HTML Slider Test</h1>

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

<p>Your slider has a value of <span id="slider-value"></span></p>