Closed musabgulfam closed 2 years ago
???
If you set smoothSnapped={true}
does this fix your problem? It will then snap on release.
Alright, after a long time, I did observe a solution. Using onValueChange
props is a bad idea. If you were to make it smooth, use the prop enableLabel
, with a customLabel
component which has the min and max values in its props to render the min and max values, and use the onValueChangeFinish
prop to set the min and max values. So the final solution may look something like this.
<MultiSlider
values={[minPrice, maxPrice]}
sliderLength={200}
onValuesChangeFinish={handleValueChange}
max={200}
smoothSnapped={true}
thumbTintColor={colors.secondaryColor}
enableLabel
customLabel={props => {
return (
<View>
<Text style={{
color: '#121212',
fontSize: 25,
fontFamily: 'Oswald-Bold',
marginBottom: 10
}}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text>
</View>
)
}}
step={1}
/>
Alright, after a long time, I did observe a solution. Using
onValueChange
props is a bad idea. If you were to make it smooth, use the propenableLabel
, with acustomLabel
component which has the min and max values in its props to render the min and max values, and use theonValueChangeFinish
prop to set the min and max values. So the final solution may look something like this.<MultiSlider values={[minPrice, maxPrice]} sliderLength={200} onValuesChangeFinish={handleValueChange} max={200} smoothSnapped={true} thumbTintColor={colors.secondaryColor} enableLabel customLabel={props => { return ( <View> <Text style={{ color: '#121212', fontSize: 25, fontFamily: 'Oswald-Bold', marginBottom: 10 }}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text> </View> ) }} step={1} />
In customLabel i am not able to set the range input using min and max. By default its picking the sliderLength as min and max. any solution?
The slider is not sliding as expected, it is not sliding smoothly, instead it is sliding in an awkward motion, i.e. it's frequently stopping and sliding.
Steps to Reproduce
Here's is the code
Expected Behavior
Actual Behavior