@DeniSidorenko

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

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

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

Вопрос, как сделать что бы лишь при клике на саму полоску можно было передвигать ее позицию по X, без минусовых позиций и не дальше чем граница ( что бы ограничевали 0 и 100% )
Заранее спасибо
  • Вопрос задан
  • 148 просмотров
Решения вопроса 1
@DeniSidorenko Автор вопроса
К сожалению подключить тайч пад было сложно
вот отличная библиотека
https://zurb.com/playground/twentytwenty
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Stalker_RED
@Stalker_RED
Выбери что-то из готовых, сам ты не напишешь, судя по уровню вопроса.
https://www.google.com/search?q=js+comparison+slider
Ответ написан
GreyCrew
@GreyCrew
https://moikrug.ru/greyewi
Делаешь два блока(один с фильтром) каждому указываешь ширину в процентах, в середине блок, который тянется, по соответствующим dnd событиям, в зависимости от изменения позиции мышки, при нажатой клавише - меняешь пропрорции ширины блоков. Саму полоску приделай к левому блоку, так проще всего.
Ответ написан
Waydim
@Waydim
создать -> улучшить ⇔ развивать :)
при клике на полосе присваиваешь ей класс, который МОЖНО двигать вправо-влево, при position 0 или 100% убираешь этот класс :) оппппля!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы