# Calculate percentage in an irregular Slider

Het guys,

Let's say we have a slider like this

As you can see the slider have irregular Steps positions, so I managed to draw the steps like this 0% 33.33% 66.66% 100%.

My question is how can i calculate the correct percentage of the value (200 as example) in that slider based on the current position of 0, 100, 500 and 1000.

My first guess would be to create a linear interpolation between the points and the grid.

For example, 200, we have that between 100 and 500, assuming that we have a linear equation to describe this particular piece

$$y = mx + c$$ we can determine the parameters as follows $$y(100) = m \cdot x_{100} + C\\ y(500) = m\cdot x_{500} + C$$ solving for m and c we find $$m = \frac{y(500) - y(100)}{x_{500} - x_{100}} = \frac{500-100}{x_{500} - x_{100}}\\$$ now we can figure out what x has to be to fit to that particular scale $$\frac{500-100}{x_{500} - x_{100}} = \frac{200-100}{x_{200} - x_{100}}$$ and re-arrange. I have used the fact that the gradient would be constant.

If you have some other scale in mind - i.e. a nonlinear curve to fit through the range then you can apply interpolation to obtain a curve fit, $$y=f(x)$$ and solve for the inverse of that equation for x. Alternatively, you can try to convert to a log scale and see if that achieves what you want.

One approach is to view it as three sliders with different scales. You would note that $$100 \lt 200 \lt 500$$ so that is the segment $$200$$ goes in. Then you would locate it $$\frac {200-100}{500-100}=\frac 14$$ of the way from $$100$$ to $$500$$. This is linear interpolation.

Another approach is to say that the reason the slider is like this is because small absolute changes at the bottom matter more than the same absolute change at the top. You could interpolate logarithmically. It would more usual to make the dots $$1,10,100,1000$$. Your slider has the low end expanded much less than this. You would have to make the bottom end $$1$$ in any case, but here you would place $$200$$ at $$\frac {\log 200 - \log 100}{\log 500 - \log 100}\approx 0.43$$ of the way along the segment.

Rather than a line with labels, you can represent your image with a graph.

You're asking what $$x_0$$ is, if the point $$(x_0,200)$$ lies on the curve. The issue is, you haven't said what you want the curve to be like. As it stands, there are infinitely many ways to connect these lines up.

If you want the connections to be straight lines between the points, then use linear interpolation as other answers have said.

If you want some kind of polynomial, you can say you have a cubic $$y=ax^3+bx^2+cx+d$$ and then solve a system of equations (3 equations 3 unknowns after setting $$d=0$$) to determine the coefficients, and then determine $$x_0$$ from there.