Помогите с красивым оформлением 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]

  On 2/17/2017 at 1:26 PM, papay said:

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

Expand  

 

  On 2/27/2017 at 11:30 AM, papay said:

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

Expand  

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

[papay]

  On 2/27/2017 at 1:10 PM, radioactive said:

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

Expand  

Пример.

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