Components

React-native slider is a useful component to take numeric input like age of a user. Lets see how we can use it to take a numeric input.

import React, { Component } from 'react';
import {    
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';

export default class Profile extends Component {
  constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 
  getVal(val){
  console.warn(val);
  }     
  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
         onSlidingComplete={ val => this.getVal(val)}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Please note, that its important to give style width to the slider component, otherwise it won’t work. Its also better to set step prop to 1, otherwise the input will be in decimal number. Props minimumValue and maximumValue are set to range between which you want to take input.

Category: Components

How to use react native slider to take input

Components