Passing an array of values

[hery]

Describe the Feature

A values props that takes an array of discrete values and only allows the slider to go through those values, e.g. see this jquery widget.

Possible Implementations

Not sure yet. Going to look into it and add it. Would you be interested in a pull request?

Related Issues

None

[michalchudziak]

Hey @hery! Indeed it sounds interesting, please send a PR, and I'll be glad to ship it :)

[hery]

Good to hear thanks! iOS is ready but I'm a bit slower with Android. Quick question, should I remove androidx from my implementation?

[orkunsenturk]

Hi @hery , I was looking for a slider component exactly like you mentioned. Here is a use case. I am trying to make a small utility for ER doctors to determine very quickly the amount of a medicine which stops heavy bleedings. And there is a slider i need there which has the values like 2.0 - 2.1 - 2.3 - 2.8 - 3.1 - 3.3 - 3.7 and so, without a contstant amount of increments.

When do you think this feature will be implemented?

Thank you very much.

[hery]

Hi @orkunsenturk, it's ready on iOS but I'm still figuring out a few things on Android.

The logic is a bit different on Android so my implementation is a little buggy, but I'll try to fix it soon.

[cltsang]

Very preliminary way to wrap Slider to enable this:

  const renderSlider = (optionsArray, initialValue, onSlidingComplete) => (
    <Slider
      minimumValue={0}
      maximumValue={optionsArray.length - 1}
      step={1}
      value={optionsArray.indexOf(initialValue)}
      onSlidingComplete={(value) => onSlidingComplete(optionsArray[value])}
    />
  );

[a-c-sreedhar-reddy]

Is anyone working on this? I would like to collaborate.

[thymikee]

@a-c-sreedhar-reddy please do!

[a-c-sreedhar-reddy]

Hi guys! Where is the code of android which takes care of steps when dragging so that UI does not change until you reach a step?

[nsdub]

Until this is formally supported, here's a workaround that worked well for my use case:

Slider component...

<Slider
  style={{width: '100%', height: 40}}
  step={0}
  minimumValue={5}
  maximumValue={60}
  onValueChange={(value) => {this.sliderValueChange(value)}}
/>

And the sliderValueChange function...

sliderValueChange = (value) => {
  // Array of desired values
  const array = [5, 10, 15, 30, 45, 60]

  const output = array.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)

  console.log(output)
  // ... Pass output to UI, state, whatever
}

[BartoszKlonowski]

I'm posting here some examples and thoughts of @gkupsaw given in the duplicate issue:

I'm not sure if this is already exists, but it would be nice to have the option to use discrete values for the slider instead of continuous options. It would probably be easiest to emulate the code of existing discrete slider implementations on the web. I haven't thought too deeply about the implementation yet, but would gladly look into it if it's something to be added.

Related Issues

An example of this kind of slider: https://material-ui.com/components/slider/#discrete-sliders (Unmanaged) implementation in RN: https://www.npmjs.com/package/react-native-snap-slider