Passing an array of values

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

[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
}

[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])}
    />
  );