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

Question

[Scalletta]

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



Ссылки на статьи и т.п. очень помогут т.к. "ну тут вот так а там вот это и тут это" - обычно не помогает

Answer 1

[Ankhena]

https://jsfiddle.net/L30qqawj/ либо трансформациями
www.cssportal.com/style-input-range
А это для коллекции ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

Answer 2

[Олег Драпеза]

1) Треугольная форма прогресс-бара делается бордерами: https://css-tricks.com/snippets/css/css-triangle/

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

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

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

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