Ползунок диапазона центрирования на треке (webkit) ⇐ CSS
-
Anonymous
Ползунок диапазона центрирования на треке (webkit)
Я пытаюсь настроить ползунок диапазона по умолчанию для WebKit так, чтобы он мне больше подходил. Я нашел этот сайт, который позволил мне сделать следующее:
input[type="range"]::-webkit-slider-runnable-track { высота: 5 пикселей; фон: розовый; радиус границы: 16 пикселей; } input[type="range"]::-webkit-slider-thumb { высота: 20 пикселей; Настройки звука:
Объем Коубелл
Однако, как вы, вероятно, заметили, большой палец не находится по центру дорожки. Итак, я немного поискал и нашел эту страницу, на которой утверждается, что следующая формула должна центрировать ползунок на дорожке:
margin-top = (высота дорожки в пикселях/2) – (высота большого пальца в пикселях/2)
Я попробовал это, но большой палец все еще не находится в центре дорожки:
input[type="range"]::-webkit-slider-runnable-track { высота: 5 пикселей; фон: розовый; радиус границы: 16 пикселей; } input[type="range"]::-webkit-slider-thumb { Margin-top: Calc((5px/2) - (20px/2)); высота: 20 пикселей; Настройки звука:
Объем Коубелл
Как вы, наверное, заметили, я считаю, что формула неверна и не центрирует ползунок на дорожке.
Есть ли для этого формула? Я хотел бы иметь возможность поиграть с размерами, пока не найду тот, который подойдет мне лучше всего. Также было бы полезно объяснить, почему эта формула работает.
Я пытаюсь настроить ползунок диапазона по умолчанию для WebKit так, чтобы он мне больше подходил. Я нашел этот сайт, который позволил мне сделать следующее:
input[type="range"]::-webkit-slider-runnable-track { высота: 5 пикселей; фон: розовый; радиус границы: 16 пикселей; } input[type="range"]::-webkit-slider-thumb { высота: 20 пикселей; Настройки звука:
Объем Коубелл
Однако, как вы, вероятно, заметили, большой палец не находится по центру дорожки. Итак, я немного поискал и нашел эту страницу, на которой утверждается, что следующая формула должна центрировать ползунок на дорожке:
margin-top = (высота дорожки в пикселях/2) – (высота большого пальца в пикселях/2)
Я попробовал это, но большой палец все еще не находится в центре дорожки:
input[type="range"]::-webkit-slider-runnable-track { высота: 5 пикселей; фон: розовый; радиус границы: 16 пикселей; } input[type="range"]::-webkit-slider-thumb { Margin-top: Calc((5px/2) - (20px/2)); высота: 20 пикселей; Настройки звука:
Объем Коубелл
Как вы, наверное, заметили, я считаю, что формула неверна и не центрирует ползунок на дорожке.
Есть ли для этого формула? Я хотел бы иметь возможность поиграть с размерами, пока не найду тот, который подойдет мне лучше всего. Также было бы полезно объяснить, почему эта формула работает.
