How to change the values in MultiSlider in react-native? - text

Question

I am working on react-native <MultiSlider> component, but one thing i just want to know, how do i change the value when i am sliding.
Default Value:
Sliding Values:
Code:
constructor() {
super();
this.state = {
priceRange : [0,10],
};
}
sliderOnChangeValue(values){
return(
<Text style={Styles.filter_label_label}>0 - 35,000</Text>
);
}
<View>
<View>
<Text>PRICING</Text>
</View>
<View>
{this.sliderOnChangeValue()}
</View>
</View>
<MultiSlider
values={this.state.priceRange}
sliderLength={300}
onValuesChange={this.sliderOnChangeValue} />
So on the above code i am calling sliderOnChangeValue() function onValuesChange i want to change the <Text> component values on range change.
Please kindly go through my above post and let me know if you find any solution.
Thanks

Answer 1

I recommend you refamiliarize yourself with the basics of React. Your approach is rather fundamentally flawed.
Callback functions cannot render things, they must update your component's state and your render function should output the UI based on state and props.
Follow the React Native Slider example on the docs website. It's nearly exactly what you want.

Answer 2

Try below code:
values={[parseInt(this.state.multiSliderValue[0]), parseInt(this.state.multiSliderValue[1])]}
and notice above code
<MultiSlider
values={[parseInt(this.state.multiSliderValue[0]), parseInt(this.state.multiSliderValue[1])]}
sliderLength={290}
onValuesChangeFinish={this.multiSliderValuesChange}
selectedStyle={{backgroundColor: '#f5a540'}}
min={16}
markerStyle={{backgroundColor: '#f5a540'}}
max={99}
step={1}
snapped
/>
Its working with me.