Можно ли, взяв произвольную точку ширины слайдера input range в пикселях, узнать какое значение value в этой точке?

Question

[Black_Fire]

Например, можно ли на 135ом пикселе как-то узнать value?
<input type="range" min=1000 max=15000>

input {
  width: 180px
}

Comments

[Elvis]

(max - min) / width * 135 + min = (15000 - 1000) / 180 * 135 + 1000 = 11500

не проверял, но чисто логика и математика начальных классов.

Answer 1

[Сергей Соколов]

Там же линейная интерполяция:
value = 1000 + 135 * (15000 - 1000) / 180 = 11500

Но это не учитывает сокращение диапазона пикселей из-за толщины «рукоятки» слайдера — а это уже зависит от стилей, платформы, браузера, положения Венеры в Марсе.

Так выглядит range slider в крайнем правом положении в Mozilla Firefox 106 под Mac Os X:
ширина 150px в масштабе 170%. Сверху точно той же ширины div с тёмной заливкой. CodePen.

Слайдер почему-то смещен на неск. пикселей правее div'а, но длина точно такая же.
Кнопка ездит, не вылезая за края диапазона. Значит, фактический диапазон пикселей меньше, чем сам слайдер.

Comments

[Elvis]

+1000
Так как минимум 1000 и при 0 width будет 1000

[Elvis]

* поправочка, не при 0 width, а при крайнем левом положении, то есть вместо 135 пикселей.

[Сергей Соколов]

Elvis, точняк, поправил.