Applies a workaround for styling the fill of <input type="range"> elements.
At the time of writing, only Firefox provides a way to style the filled-in area of a range input via the
input::-moz-range-progress psudo element. If that psudo element is found to not exist, then a
--range-workaround-fill-amount CSS variable will be set to a value between 0 and 1 based on the following formula
(value - min) / (max - min). This, for example, can be used to set the width of the ::before or ::after psudo
elements.
Parameters
Optionalalways: boolean
apply the --range-workaround-fill-amount regardless of whether or not the
input::-moz-range-progress psudo-element exists.
Applies a workaround for styling the fill of
<input type="range">
elements.At the time of writing, only Firefox provides a way to style the filled-in area of a range input via the
input::-moz-range-progress
psudo element. If that psudo element is found to not exist, then a--range-workaround-fill-amount
CSS variable will be set to a value between 0 and 1 based on the following formula(value - min) / (max - min)
. This, for example, can be used to set the width of the::before
or::after
psudo elements.