Блог

Я работаю над слайдером, для которого мне нужно какое-то странное поведение. Я искал решения и библиотеки, но не нашел ничего, что полностью соответствовало бы тому, что мне нужно, и у меня возникли некоторые проблемы с его созданием.

Я пытаюсь создать ползунок для значения диапазона. С шагами, динамическим минимальным и максимальным значением. Также мне показалось проблематичным работать с эффектом стиля.

Пример:

ползунок с диапазоном от 0 до 50

шаг установлен на 10

минимальное значение равно 16 (начальное значение должно быть одинаковым) — до этого момента ползунок должен быть красным

начальная точка должна быть на 16 (что трудно сделать, когда мне нужны шаги)

когда значение >16, другой цвет и для всего, что не выбрано, как обычный серый.

Я пытался использовать nouislider и в целом везде, где мог. Если у кого-нибудь есть какая-либо идея или решение, я буду благодарен за любую помощь.

Вы можете настроить это в noUiSlider, используя функции «нелинейные диапазоны» и «заполнение».

В основном вы бы настроили три диапазона:

• от 0 до 16, без шага
• с 16 по 20, шаг 4
• от 20 до 50, шаг 10

Затем вы отключите первый поддиапазон, установив отступ [16, 0] .

Стиль, который вы описали, может быть достигнут с помощью стилей .noUi-target с вашими цветами фона.