Как сделать ренж инпуты?

Question

[sw213]

Добрый день хабр, стоит задача, на основании данных, которые приходят с сервера сделать такую таблицу. Как это можно реализовать. Я так же немного не понимаю, как мне определять степень заливки (я так понимаю это делается с помощью ренж - инпут). Надо брать максимальное приходящее значение и все остальные данные с ним сравнивать?

Comments

[Антон Литвиненко]

мне так это скорее прогресс бары чем инпуты

[Ankhena]

Не вижу тут инпутов. По-моему, это вообще вводи данных, а наоборот, их демонстрация.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Надо брать максимальное приходящее значение и все остальные данные с ним сравнивать?

Про это разумнее читать в ТЗ. Откуда берутся данные и какие значения максимальные.

[sw213]

Ankhena, там не описано, вернее задача стоит просто сделайте

[Ankhena]

sw213, они что, не говорящие? Нельзя спросить и уточнить?

Тогда делайте на свое усмотрение, мы же тоже не угадаем, как оно там рассчитывается.

Цвет удобно делать через кастомные.

Answer 1

[Вадим]

1) Зависит от того, нужна ли возможность менять значения.
Если нет(а судя по скриншоту как раз это просто индикатор), то это скорее тэг meter или progress
Правда у progress всего 1 цвет по умолчанию, а у meter 3 цвета, а у вас, судя по картинкам - 4 (орандж, жёлтый, зелёный, фиолетовый)
То есть можно создать на основе meter свой компонент или сделать обработчик и доопределить цвета в зависимости от значения, либо обойтись 3мя цветами (которые можно переопделить: https://stackoverflow.com/questions/8094835/how-to...)
На худой конец это просто div с заливкой.

2) Как определять цвета - это Вам не у нас нужно спрашивать. То есть нужно узнать на каком основании делать разбивку. Мы можем придумать Вам вариант, но Вы и сами можете придумать как угодно (описанный в вопросе вариант - один из возможных). Если это просто рандомный макет, то так и сделайте. Задавайте как в голову придёт. Если нет - спросите у постановщика.