Sometimes you can simply replace the slider’s components, but on occasion you have to create everything from scratch. Which can be tricky if you don’t know the math running under the hood. So I’m going to skip the visual side and discuss how to find a value within any given interval.
Lets start with the simplest, the percentage slider. We know the edges of the slider represent the 0% and 100%, but what about the value for any position in between?
We can use Cross-Multiplication to find the missing value:
x1 – x0 100% x1 – x0
Subtracting the x0 to the x1 is what gives us the size of the slider. And subtracting to the x gives the distance the button covered between both edges. Also it makes the position of the slider irrelevant to the calculations.
But while the percentage just measures the amount the button traveled along the slider, the other sliders can range between any 2 numbers A and B.
So after going through the same process as the percentage slider, we need to take the resulting value and remove its percentage unit:
Then we can apply that value to this equation in order to find the value within any given range:
In order to avoid the slider starting from zero, the equation applies the distance the button traveled to the difference between the edges and then adds back the start of the slider.