1) Треугольная форма прогресс-бара делается бордерами:
https://css-tricks.com/snippets/css/css-triangle/
2) Движение ползунков, ключевые моменты:
Событие mousedown вы отслеживаете на ползунке либо на прогресс-баре.
Внутри обработки mousedown вешаете события mousemove и mouseup на document или window (не забудьте их убрать по mouseup)
Во время mousemove вычисляете положение курсора относительно левого края слайдера (например event.clientX - sliderElement.getBoundingClientRect().left).
Необходимо еще отслеживать, что бы позиции были не меньше нуля, и не больше ширины слайдера (точнее ширина слайдера - ширина ползунка).
Еще, для адаптивности, желательно все из пикселей в % переводить
Средний