Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert centimeter value into feet using multi-slider in react-native?

Tags:

react-native

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>
            );
        }
    }

user-interface like this

like image 561
Manoj Kashyam Avatar asked Jan 17 '20 06:01

Manoj Kashyam


1 Answers

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>
like image 59
Prakash Karena Avatar answered Nov 16 '22 03:11

Prakash Karena