@Scalletta

Как реализовать этот ползунок?

Всем привет!!!
Народ подскажите как подобное реализовать.

59d646d436598446080034.png

Ссылки на статьи и т.п. очень помогут т.к. "ну тут вот так а там вот это и тут это" - обычно не помогает
  • Вопрос задан
  • 761 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега JavaScript
Нежно люблю верстку
https://jsfiddle.net/L30qqawj/ либо трансформациями
www.cssportal.com/style-input-range
А это для коллекции ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@SuperOleg39ru
Front-end разработчик
1) Треугольная форма прогресс-бара делается бордерами: https://css-tricks.com/snippets/css/css-triangle/

2) Движение ползунков, ключевые моменты:
Событие mousedown вы отслеживаете на ползунке либо на прогресс-баре.
Внутри обработки mousedown вешаете события mousemove и mouseup на document или window (не забудьте их убрать по mouseup)

Во время mousemove вычисляете положение курсора относительно левого края слайдера (например event.clientX - sliderElement.getBoundingClientRect().left).

Необходимо еще отслеживать, что бы позиции были не меньше нуля, и не больше ширины слайдера (точнее ширина слайдера - ширина ползунка).

Еще, для адаптивности, желательно все из пикселей в % переводить
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы