Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Specify algorithm or a hard coded list of slider values #29

Open
websocket98765 opened this issue Aug 11, 2019 · 7 comments
Open

Specify algorithm or a hard coded list of slider values #29

websocket98765 opened this issue Aug 11, 2019 · 7 comments
Labels
enhancement New feature or request

Comments

@websocket98765
Copy link

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
Copy link
Owner

tajo commented Aug 18, 2019

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.

@tajo tajo added the enhancement New feature or request label Aug 18, 2019
@websocket98765
Copy link
Author

websocket98765 commented Aug 19, 2019

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
Copy link

mattez commented Jun 12, 2020

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

@websocket98765
Copy link
Author

good example!

@axtn
Copy link

axtn commented Jun 26, 2020

@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
Copy link

MilesYM commented Jul 19, 2021

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

@Raven0us
Copy link

Raven0us commented Nov 16, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants