Как реализовать такой input[type=range]?

Question

[Станислав Ботев]

Доброго времени суток.
Суть проблемы такова: есть сайт, на котором лежат примеры форм. В разделе JS лежит картинка, которую необходимо реализовать.
Вопрос: как это сделать правильно?



UPD. Благодаря совету в комментариях, решена первая часть проблемы, а именно стилизация.
Вторая часть:

1. Фиксация прогресса на четырех позициях;
   
2. Окраска в зависимости от позиции;
   
3. Расположение описание прогресса (решено).
   

остается не решенной.

Answer 1

[Юнус Газиев]

Ion.RangeSlider