Custom Sliders

Sliders are a pretty common user interface element, but have you ever found yourself not liking the designs provided and wanting make your own?

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.

slider Custom Sliders 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:

x – x0 = ? % <=> ? = (x – x0) * 100

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.

slider21 Custom Sliders 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:

n  =   percentage 
100

Then we can apply that value to this equation in order to find the value within any given range:

?   =   n * (B – A) + A

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.

You may also like...