React Native Slider


Sliders is used select a value from a fixed set of options. In this chapter we will learn about ReactNative Slider component.

Syntax

<Slider 
    maximumValue={100}
    minimumValue={0}
    step={1}
    value='initial value'
/>

 

Props

animateTransitions

Set to true if you want to use the default 'spring' animation

Type Default Optional
bool false Yes

animationConfig

Used to configure the animation parameters. These are the same parameters in the Animated library.

Type Default Optional
object undefined Yes

animationType

Set to 'spring' or 'timing' to use one of those two types of animations with the default animation properties.

Type Default Optional
string 'timing' Yes

debugTouchArea

Set this to true to visually see the thumb touch rect in green.

Type Default Optional
bool false Yes

disabled

If true the user won't be able to move the slider

Type Default Optional
bool false Yes

maximumTrackTintColor

The color used for the track to the right of the button

Type Default Optional
string '#b3b3b3' Yes

maximumValue

Initial maximum value of the slider

Type Default Optional
number 1 Yes

minimumTrackTintColor

The color used for the track to the left of the button

Type Default Optional
string '#3f3f3f' Yes

minimumValue

Initial minimum value of the slider

Type Default Optional
number 0 Yes

onSlidingComplete

Callback called when the user finishes changing the value (e.g. when the slider is released)

Type Default Optional
function   Yes

onSlidingStart

Callback called when the user starts changing the value (e.g. when the slider is pressed)

Type Default Optional
function   Yes

onValueChange

Callback continuously called while the user is dragging the slider

Type Default Optional
function   Yes

orientation

Set the orientation of the slider.

Type Default Optional
string 'horizontal' Yes

step

Step value of the slider. The value should be between 0 and maximumValue - minimumValue)

Type Default Optional
number 0 Yes

style

The style applied to the slider container

Type Default Optional
style   Yes

thumbStyle

The style applied to the thumb

Type Default Optional
style   Yes

thumbTintColor

The color used for the thumb

Type Default Optional
string '#343434' Yes

thumbTouchSize

The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.

Type Default Optional
object {width: 40, height: 40} Yes

trackStyle

The style applied to the track

Type Default Optional
style   Yes

value

Initial value of the slider

Type Default Optional
number 0 Yes

 

 

Example

import React, {Component} from 'react';

//import react in our code.

 

//For React Native >= 0.59

import Slider from '@react-native-community/slider';

 

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

 

export default class SliderExample extends Component {

  constructor(props) {

    super(props);

    this.state = {

      //Initial Value of slider

      sliderValue: 15,

    };

  }

 

  render() {

    return (

      

        {/*Text to show slider value*/}

        

          Value of slider is : {this.state.sliderValue}

        

 

        {/*Slider with max, min, step and initial value*/}

        

          maximumValue={100}

          minimumValue={0}

          minimumTrackTintColor="#307ecc"

          maximumTrackTintColor="#000000"

          step={1}

          value={this.state.sliderValue}

          onValueChange={sliderValue => this.setState({sliderValue})}

        />

      

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    padding: 20,

    justifyContent: 'center',

    backgroundColor: '#ecf0f1',

  },

});

 

 


Subscribe For Daily Updates