Как отрегулировать пересечение ползунков при сближении друг с другом?

Question

[alex0176]

Привет!
Подскажите, пожалуйста. Есть Range Slider фильтра. При сужении ползунки перекрывают друг друга. Шаг установлен перемещения установлен как 1. Возможно ли сделать так чтобы при сближении ползунков они лишь соприкасались но не перекрывали друг друга.

Comments

[Сергей delphinpro]

Это какая-то библиотека или что-то своё?

[alex0176]

Это есть кастомный код. Здесь используются два input type="range" которые стилизируються CSS
Если посмотреть под капот то вот такое мы имеем: 2 отдельных input которые накладываться друг на друга. Проблема в том что я пока что не могу js отрегулировать соприкосновение двух ползунков.

[alex0176]

Кстати пример я брал вот от сюда - https://codepen.io/alexpg96/pen/xxrBgbP Там также есть пересечение ползунков

[Ivan Ustûžanin]

alex0176, в примере есть minGap — значение подбирается эмпирически или числено

[alex0176]

Я это знаю. Проблема в том, что диапазон значений у меня динамически изменяется и это вызывает трудности. Так, если диапазон состоит из 3 значений то расстояние слишком велико, а вот если значений много то имеет место пересечение. И угадать какой значение minGap устанавливать есть трудно. Это хорошо работает для статических данных. А так как это есть фильтр и значения динамически меняются возникает коллапс...
Вот на скриншоте в первом случаи значений 15 есть перекрытие, а во втором их всего лишь 3 и расстояние большое


Здесь minGap установил 1

[Ivan Ustûžanin]

alex0176, вообще не давать наезжать ручкам друг на друга кажется странным

но я же писал «численно», т.к. все данные есть:
ширина в пикселях известна, делим её на длину диапазона, получаем пикселей на шаг
умножаем что получилось на диаметр (2 радиуса) ручки и округляем вверх до целого, вот и получается minGap