When I used multi-slider I faced one issue is that when I scroll slider I got only centimeter
value I did not change feet value so I need help to change centimeter
value with change feet value.
class App extends React.Component {
state = {
sliderOneChanging: false,
sliderOneValue: [5],
multiSliderValue: [122, 222],
};
multiSliderValuesChange = values => {
this.setState({
multiSliderValue: values,
});
};
render() {
return (
<View style={styles.container}>
<View style={styles.sliders}>
<View style={styles.sliderOne}>
<Text style={styles.text}>{this.state.multiSliderValue[0]} cm </Text>
<Text style={styles.text}>({this.state.multiSliderValue[0]})</Text>
</View>
</View>
<View style={styles.containerSlider}>
<MultiSlider
values={[
this.state.multiSliderValue[0],
]}
sliderLength={400}
onValuesChange={this.multiSliderValuesChange}
min={122}
max={222}
allowOverlap
snapped
selectedStyle={{
backgroundColor: 'pink',
}}
unselectedStyle={{
backgroundColor: 'silver',
}}
trackStyle={{
height: 2,
}}
/>
</View>
</View>
);
}
}
you can create one function which return feet value like
const convertedCentoFeet = (values) => {
var realFeet = ((values * 0.393700) / 12);
var feet = Math.floor(realFeet);
var inches = Math.round((realFeet - feet) * 12);
return feet+"'"+inches;
}
then use it like
<Text style={styles.text}>({convertedCentoFeet(this.state.multiSliderValue[0])}"))</Text>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With