Диапазон ввода большого пальца смещается со временем

Question

Я просмотрел весь Stackoverflow, и кажется, что все ползунки диапазона с метками большого пальца имеют эту проблему.Например, этот ответ почти не имеет его, но все еще имеет.

По сути, вы можете вычислить value / max, чтобы получить стиль left для метки значения диапазона, поэтомучто он всегда выровнен по большому пальцу.

Проблема в том, что чем дальше вы скользите вправо, тем больше смещение.Например, в связанном ответе метка начинается с левой стороны большого пальца при значении 0 и медленно скользит к правой стороне большого пальца к тому моменту, когда она достигает 100.

Почемуэто происходит?Я реализую свое собственное решение, и оно страдает от этой проблемы.Кроме того, у каждого ответа, который я видел в Stackoverflow, есть эта проблема.Что является причиной этого, и есть ли хорошее решение?

Вот дерьмовый GIF проблемы:

Answer 1

Это происходит потому, что центр точки не представляет значения.Допустим, размер точки составляет 10 пикселей, а ползунок шириной 100 пикселей.Когда значение ползунка равно 0, центр точки фактически равен 0px + 5px, то есть 0 * slider_width + 0.5 * dot_width.Когда ползунок на 100%, тогда центр точки на 100px - 5px, то есть 1 * slider_width - 0.5 * dot_width.

Чтобы устранить эту проблему, необходимо вычесть значение смещения (percent_as_decimal - 0.5) * dot_width.Это будет отрицательным, когда менее 50%, поэтому при вычитании это добавит.

Теперь указанное выше смещение будет влиять только на положение левой стороны элемента.Вам также нужно будет поместить перевод 50% через transform: translateX(-50%); в контейнер числа, чтобы указать ширину элемента числа.

Подводя итог: 1) выровняйте левую сторону числа по центру точки 2) переведите число, чтобы поместить центр числа так, чтобы левая сторона была раньше.