Как добавить для input range полосу выбранного растояние?

Question

[DeniSidorenko]

Привет, сделал такую полоску


Первый кружок сделан через before, для декоратива. И вот мне надо полоска которая находится между ними двумя была другого цвета.

Answer 1

[sergey]

Используйте ion.rangeslider и кастомизируйте его под свои нужды

Answer 2

[Дима]

Линейный градиент с резким переходом как вариант:

background-image: linear-gradient(to left, #ffffff 15%, #000 15%, #000 85%, #fff 85%);

Comments

[DeniSidorenko]

Полоска меняется, тут надо по другому

Answer 3

[Exploding]

Два блока:

<div class='slide-container'>
   <div class='slider'></div>
</div>

slide-container - высота 3px grey width: 300px
slide-container:before - левый кружок
slider - 30x30px, bord.rad: 50% - правый кружок
slider:before - block height:3px green left:0 width:auto

Извините за корявость, спешу просто...
Ну думаю суть понятна