Как реализовать этот ползунок?
https://jsfiddle.net/L30qqawj/ либо трансформациями
www.cssportal.com/style-input-range
А это для коллекции ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
1) Треугольная форма прогресс-бара делается бордерами:  https://css-tricks.com/snippets/css/css-triangle/
2) Движение ползунков, ключевые моменты:
Событие mousedown вы отслеживаете на ползунке либо на прогресс-баре.
Внутри обработки mousedown вешаете события mousemove и mouseup на document или window (не забудьте их убрать по mouseup)
Во время mousemove вычисляете положение курсора относительно левого края слайдера (например event.clientX - sliderElement.getBoundingClientRect().left).
Необходимо еще отслеживать, что бы позиции были не меньше нуля, и не больше ширины слайдера (точнее ширина слайдера - ширина ползунка).
Еще, для адаптивности, желательно все из пикселей в % переводить