Двойной слайдер, что я не так делаю?

Question

[NeKt0]

Привет всем!

Делаю двойной слайдер для проекта: здесь

Вот как он выглядит:


Обратите внимание на правый край слайдера:


Активный трек (полоска оранжевая) находится под кнопкой - ползунком. И это хорошо.

Но как только я начинаю использовать правый ползунок, положение активного трека меняется - он теперь примыкает к ползунку:


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

Что я делаю не так?
Буду очень признателен за подсказку. Замучился в попытках разобраться.

P.S. Ещё буду признателен, если объясните, как сделать так: если какой-то из ползунков оказывается в позиции второго (то есть они совпадают), то движение дальше невозможно. То есть чтобы можно было двигать ползунок до соседа и не дальше.

Comments

[Kovalsky]

Довольно банальная ошибка в расчётах:

<div class="price-slider__range-between" style="width: 283px; margin-left: 0px;"></div>
<div class="price-slider_first" style="margin-left: 0px;"></div>
<div class="price-slider_second" style="margin-left: 283px;"></div>

Обратите внимание на одинаковые значения для ширины активной части рейнджа и левого отступа кружка

Answer 1

[Илья Колин]

Не учитываешь в скрипте потом ширину кнопки правой.
Я понаставил везде + 24 в этом выражении between.style.width = (left2 - left1 + 24) + 'px';
и все ок.

Но главный вопрос - зачем это? С таким полотном JS?
Есть же нативный range в html

Comments

[NeKt0]

За подсказку спасибо! Выручил.

Нативный двойной range?

[Илья Колин]

Олег Бубнов, да, действительно, это я наивно полагал что есть.
https://jqueryui.com/slider/#range
Но в jQuery UI есть

[NeKt0]

Илья Колин, мне как раз jQuery в проекте не нужен, поэтому этот вариант не рассматривал даже, хотя в курсе о его существовании.

Мне нужен был именно вариант на JS.

[Илья Колин]

Олег Бубнов, понятно. Ну решение твоего вопроса я выше написал

[NeKt0]

Илья Колин, я увидел и применил. Благодарю, выручил!

А как сделать так, чтобы ползунки не двигались за пределы своего соседа? Если какой-то из ползунков оказывается в позиции второго (то есть они совпадают), то движение дальше невозможно. То есть чтобы можно было двигать ползунок до соседа и не дальше.

[Илья Колин]

Олег Бубнов, абстрактно - взять позицию соседа, и при движении проверять не пересекается ли с ней. Стопать, но в обратную сторону пускать
На практике - надо думать.
Мне обычно помогает если затык - на листке бумаги все чертить и писать как что себя поведет, и таким образом выстраиваю простейший алгоритм, который уже потом не трудно существующими средствами реализовывается

[NeKt0]

Илья Колин, благодарю. Буду думать дальше.

[Владислав Лысков]

Олег Бубнов, https://leaverou.github.io/multirange/
решение на чистом js

[NeKt0]

Владислав Лысков, та же "простыня" получается в JS.

[Владислав Лысков]

Олег Бубнов, я просто подсказал, ну и кода там почти вдвое меньше

[NeKt0]

Владислав Лысков, в качестве альтернативного варианта пойдёт. Благодарю. ;-)