Помогите с красивым оформлением input range на css

[papay]

Нуждаюсь в помощи, сделал свой инпут но столкнулся с проблемой, не могу понять как менять цвет полосы за ползунком при его перемещении, может кто посмотреть и указать на ошибку и помочь? Буду благодарен.

 

[radioactive]

http://jsfiddle.net/JnrvG/1/

https://jsfiddle.net/pjyxw72x/

https://codepen.io/ryanttb/pen/fHyEJ

 

[radioactive]

.rangeSlider:active {
    background: red;
}

 

[papay]

Спасибо попробовал, но работает как то не правильно. Просто выделяет всю полосу красным в момент перемещения кружка.

[radioactive]

В 17.02.2017 в 16:26, papay сказал:

как менять цвет полосы за ползунком при его перемещении

 

1 час назад, papay сказал:

работает как то не правильно. Просто выделяет всю полосу красным в момент перемещения кружка.

так а что нужно то? 

[papay]

On 27.02.2017 at 16:10, radioactive said:

так а что нужно то? 

Пример.

Я передвинул ползунок на 30% вправо, так вот, нужно что бы 30% полосы слева за ползунком стали например красные, а оставшаяся правая часть полсы была стандартного цвета. Как то так.