Как сделать такой функционал?

Question

[DeniSidorenko]

Добрый день, делаю такой мокап с переключателем. Всю логику продумал все легко. Осталось лишь сделать один маленький пункт


Как видно на изображение сделал своими руками. Все очень просто, есть родительский блок который ограничен рамками макбука( Только экран без рамок). И есть это полоска. Она центрируется через position absolute. На скриншоте имеет left 55%. Left 0 - граница изображения.

Вопрос, как сделать что бы лишь при клике на саму полоску можно было передвигать ее позицию по X, без минусовых позиций и не дальше чем граница ( что бы ограничевали 0 и 100% )
Заранее спасибо

Answer 1

[DeniSidorenko]

К сожалению подключить тайч пад было сложно
вот отличная библиотека
https://zurb.com/playground/twentytwenty

Answer 2

[Stalker_RED]

Выбери что-то из готовых, сам ты не напишешь, судя по уровню вопроса.
https://www.google.com/search?q=js+comparison+slider

Comments

[DeniSidorenko]

Напишу) не волнуйся

[Ярослав Иванов]

DeniSidorenko, давай. А если не напишешь то удаляешься с тостера.

[Stalker_RED]

DeniSidorenko, ну тогда пиши:
при mousedown начинаешь отслеживать mousemove и сдвигаешь полоску. границы проверяя ессно.
при mouseup прекращаешь отслеживать и двигать.

потом попробуй добавить поддержку тача.

[DeniSidorenko]

Stalker_RED, Да, правильно сказал про поддержку тача, с этим беда

[DeniSidorenko]

Ярослав Иванов, Свободен

[DeniSidorenko]

Stalker_RED, Спасибо использовал эту https://zurb.com/playground/twentytwenty

[yarovikov]

DeniSidorenko, ты вроде грозился сам написать?)

[DeniSidorenko]

yarovikov, Да, но к сожалению не знаю как добавить поддержку touch pad

Answer 3

[Waydim]

при клике на полосе присваиваешь ей класс, который МОЖНО двигать вправо-влево, при position 0 или 100% убираешь этот класс :) оппппля!