В настоящее время я разрабатываю многосегментированный слайдер ценового диапазона с использованием HTML, CSS и JavaScript для своего проекта.
Чтобы вам было понятнее, вот изображение многосегментного ползунка ценового диапазона:
В процессе реализации я столкнулся с проблемой, связанной с динамическим отображением меток под ползунком. В частности, я хочу отображать метки исключительно для активного сегмента, предоставляя информацию о расстоянии ползунка от соответствующих начальной и конечной точек.
Ниже приведен фрагмент примера данных, с которыми я работаю:
const слайдерДанные = [ { сегмент: 1, цвет: «темно-зеленый», диапазон: { минимум: 18013, максимум: 21020 } }, { сегмент: 2, цвет: «зеленый», диапазон: { минимум: 21020, максимум: 22220 } }, { сегмент: 3, цвет: «светло-зеленый», диапазон: { low: 22560, high: 23663 } }, { сегмент: 4, цвет: «оранжевый», диапазон: { минимум: 22220, максимум: 22560 } }, { сегмент: 5, цвет: «красный», диапазон: { минимум: 23663, максимум: 24908 } } ]; Как мне преодолеть это препятствие?
