Jquery UI Slider - Currently Linear, would like to change formula for display

Question

I am trying to make changes to the JQuery UI Slider. Changing it from linear in its range of number to more formula based. The reason is that we sell diamonds and our range is from .30 carats to 9 carats, however 90% of the buyers want something between .30 to 2, so I would like that range to be the larger part of the slider.

Hopefully this makes sense. However, I think I need some expertise in how to accomplish this or where to begin.

Requirements: For our carat based search, 90% of our diamonds are between .30 ct to 3.0 ct, which is only 30% of the real estate (horizontal) of the slider itself. We want it it to slide [.30 – 3.0] carats for the first 66% of the slider, then increase much faster for the remainder of the slider [3.0 – 9.0] carats. It almost as we want to change this from moving in a linear form to a more of a curve, i.e. y=x^1.25 where y is the carat value and x is the position .. maybe using an x^2 curve after they have exceed the 3.0 carat marker ..

Thanks in advance for ANY pointers, support, tips!! Robert

Answer 1

I would think the easiest way is to use a linear scale on the slider, then do some kind of math under the hood to produce a non-linear result. Rather than modifying the control, come up with a reasonable-sized range (0-100), say; then translate the result from that range to an output, according to your formula you've given here.

Answer 2

Have you thought about making a custom version of the slider for your needs?

id say a good start would be to try to modify all occurrences of the curValue calculations in the slider