Как сделать заполняющийся input-range с пройденной стороны?

Question

[alaskafx]

Представим, что input (с типом range) заполнен на 20 (мин 0, макс 100) - нужно, чтобы background применился к только заполненному(20), а всё остальное серое.

Как такое сделать?

Comments

[Ankhena]

Градиентом.
Получаете значение инпута, переводите в %, подставляете в кастомное свойство, которое отвечает за точку перехода градиента.

[alaskafx]

Ankhena, А что, если у меня минимальное -1, а максимально 1 с шагом 0.1?
Как тогда это сделать?

[Ankhena]

alaskafx, и что с того? Это вообще ничего не меняет.
1 - (-1) = 2
2 = 100% и дальше по сценарию.

[alaskafx]

Ankhena,
Вроде понимаю, но не понимаю, как реализовать...
Можете пожалуйста на этом примере сделать?

[Ankhena]

alaskafx, при чем тут 129?

Считаете "длину" всей полосы. Принимаете её за 100%.
Получаете значение. Выясняете сколько это в % от всей полоски.
(value - min) /(max-min) *100%
Подставляете полученный процент в градиент.
Пиксели в этом деле вообще не участвуют.
С пикселями придётся узнавать ширину range, узнавать снова при ресайзе, переводить туда сюда и т.д.

Answer 1

[Максим]

Comments

[alaskafx]

А что, если у меня минимальное -1, а максимально 1 с шагом 0.1?
Как тогда это сделать?

[Максим]

alaskafx, в вопросе нету о -1 до +1

Вы на ходу придумываете новые версии ?

[alaskafx]

Brasileiro, Нет, ибо задача такая стоит