How can I create a discrete slider in react-native (iOS)? - ios

Question

I have a slider component in my react-native app that is nicely restricted to discrete values from 1-5 using the minimum/maximumValue properties and some rounding in onValueChange:
<View>
<Text style={styles.text} >
{this.state.value}
</Text>
<SliderIOS
ref='slider'
style={styles.slider}
value={1}
minimumValue={1}
maximumValue={5}
onValueChange={(value) => {
this.setState({
value: Math.round(value)
});
}}
/>
</View>
What I would like is for the slider handle button to snap to the discrete positions 1,2,3,4,5 rather than move continuously along the slider. Hints appreciated!

Answer 1

For future reference: SliderIOS has been deprecated in the meantime and one should use the Slider component. <Slider> comes with a step attribute:
Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
So the solution to the specific question would be to simply set
<Slider
step={1}
...
/>

Answer 2

you're almost there but in the docs of SliderIOS it says:
value number
Initial value of the slider. The value should be between minimumValue
and maximumValue, which default to 0 and 1 respectively. Default value
is 0.
This is not a controlled component, e.g. if you don't update the
value, the component won't be reset to its inital value.
Therefore, it's not possible to control the behavior of the native slider in the way you want it to work.
Solution using another component
However, there is a JavaScript version of the <Slider> component which let's you do it. Since it uses some of the props SliderIOS has, you can easily replace it. Just load the npm module, require it and change <SliderIOS> to <Slider>. Now you need to make some adjustments to your current code:
The property value of the component should reference a variable which can be changed by your code. You can use getInitialState to have a default value.
Add your callback function used for onValueChange to onSlidingComplete. Otherwise you could still have values in between when you release the slider.
I used sliderValue instead of value to make it clearer.
`
getInitialState() {
return {
sliderValue: 1
}
},
onSliderValueChange(value) {
this.setState({
sliderValue: Math.round(value)
});
},
render() {
return(
<View>
<Text style={styles.text} >
{this.state.sliderValue}
</Text>
<Slider
ref='slider'
style={styles.slider}
value={this.state.sliderValue}
minimumValue={1}
maximumValue={5}
onValueChange={this.onSliderValueChange}
onSlidingComplete={this.onSliderValueChange}
/>
</View>
)
}
`
I didn't check my last version the code but it should work like that.