Specify algorithm or a hard coded list of slider values

[websocket98765]

AirBnB's rheostat, allows specifying an algorithm (deafult is linear, but others include log10 or geometric). This is useful if you have a wide range of values (e.g. 1 to 1,000), but the small values are much more significant. At the small end, each value can be adjusted one by one, at the large end, it follows the algorithm and adjusts in larger increments.

Alternatively, a hard coded list of values would be a good option too:
For example:

• 1-99, use steps of 1
• 100-195, use steps of 5
• 200+, use steps of 10
• 500+, use steps of 100

Is this possible in some way already? I may have missed it. Nice job building this slider!

[tajo]

It would be nice to have an option to use an alternative scale like log10 or exponential.

a hard coded list of values

Not a big fan of this. It would make the API and code somewhat messy. Also, if you are not using a consistent scale across all values, it might make sense to use a different UI, maybe a group of radio inputs? Otherwise, having a single slider with different intervals / steps seems confusing.

[websocket98765]

Maybe "hard coded" isn't the best descriptor. A "custom function"? Rheostat for example says "Feel free to write your own as long as it conforms to the shape". It serves the same purpose as log10 or exponential, but can be tailored to ones data set better. (I assume log10 & geometric are just pre-defined functions.)

To clarify the benefit, for many use cases and data sets (such as mine, somewhat represented by the examples above), changes in the lower values are much more significant to end users (i.e. a change of value from 16 to 24 or 28, etc is very important), but changes in higher values are not very significant (300 or 310 or 320 all give basically the same results), hence the steps to 10. But since I intimately know the data, I know that a scale with steps of 1 from 1-100 are very useful to the user and steps of 5 are most useful 100-195, etc.

It improves the UX when this scale really fits the data well because the slider uses space most efficiently to distribute significant values, consequently it makes it easier for users to select the desired value, instead of wasting a lot of length with wasted precision on high values and reducing the slider length used for small values where changes are very significant to the user. In short, it makes it easier for the user to accurately select the desired value.

[mattez]

Example of this behavior: https://refreshless.com/nouislider/slider-values/#section-non-linear-step

[websocket98765]

good example!

[axtn]

@websocket98765 I think I would side with @tajo that it shouldn't be a part of the api, it's probably something not many people will use and might make the api more complicated.

But i did find myself needing increasing step values along the range for a price range (1 - thousands). I tried a logarithmic function, but it doesn't really provide a good experience (way too much precision on lower ends, and rapidly increases too quickly).

I found a great SO post here: https://stackoverflow.com/a/56557377/2325766
You can essentially create a wrapper multi-stepped (idk what term to use) range component around react-range and just use the scaleTransform method to transform the outputted values

My implementation values looked something like the following, where anything prefixed with RANGE_ is actually passed to react-range

const EXPO_MIN = 1;
const EXPO_MAX = 5000;
const EXPO_INCREMENTS = [  1, 5, 10, 10, 20, 200 ];
const RANGE__MIN = 0;
const [ RANGE_MAX, sliderTransform ] = scaleTransform(EXPO_MIN, EXPO_MAX, EXPO_INCREMENTS);
const RANGE_STEP = 1;

// later to use transformed values...
<div>{sliderTransform(exampleState[0])}</div>

There are also snippets in the SO page if logarithmic transform functions are desired.
Hopefully this helps.

[MilesYM]

I'm upvoting this thread. It would be great to have a logarithmic scale.

[Raven0us]

Snap, so this is not available. :( Any pricing scheme or similar requires this, since most prices are decided by volume.