Input range — Как нарисовать метки?

Question

[Alexey]

Столкнулся с такой задачей:
Необходимо добавить к input range метки.
Как на градуснике для измерения температуры, только эти метки должны быть в горизонтальном инпуте не внутри в снизу с обозначением значений.
К примеру вот это изображение:


Средний инпут, вот пример того что мне необходимо.

Имеется простейший инпут с минимальным, максимальным и шаговым значениями.

Подскажите где читать, смотреть, может показать на примере сможете...?

Заранее спасибо!

Answer 1

[Web_Questions]

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

Comments

[Alexey]

Дело в том что я имею после инпута 2 строки, в первой я имею метки, во второй есть 3 значения (начальное, среднее, максимальное). Они должны быть подогнаны один к одному. Ну и естественно - все это должно быть респонсивным от 320 - 1680 px

[Web_Questions]

azovl: в чем проблема? подгоните этих 3 к меткам метки к значениям инпута ну и дальше по схеме...)

[Alexey]

ок, я просто надеялся что есть нативные какие нибудь понятия, что-то вроде меток...

[Web_Questions]

azovl: я делал только так) может быть и есть) вы если сеткой пользуетесь при верстке то и их черточки и значения тоже сеткой заверстайте и будет вам респонсив и тд

[Alexey]

Спасибо за ответы!