React Native Slider/Seekbar Example

This tutorial explains how to make slider/seekbar layout in react native application that helps to select a single value from a range of values. Basically Sliders allow users to make selections from a range of values. Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Slider is useful user interface element which is used commonly in android applications. A Slider is an extension of ProgressBar that allows the selection of numerical values using a natural user thumbs. Basically, Slider has a thumb that you can slide to choose a value between 0 and some maximum that you set.You can touch the thumb and drag left or right to set the current progress or use the arrow keys.

@react-native-community/slider

Prerequisite : 
1. Install the react-native-slider package in your React Native project.

yarn add @react-native-community/slider
or
npm install @react-native-community/slider --save

2. Link the dependency, by applying below command :

react-native link @react-native-community/slider

Refer the below screenshot, while installing react-native-slider package :

For manual installation please refer this link : @react-native-community/slider

React Native Slider Example :

Lets follow the below steps that helps to make slider/seekbar layout in react native application that helps to select a single value from a range of values.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet, Platform } from 'react-native';
import Slider from '@react-native-community/slider';

Step 4: Lets create constructor block inside your App component.

constructor(props) {
    super(props);
    this.state = {
      //Initial Value of slider
      sliderValue: 15
    };
  }

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component. 

render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >

        {/*Text to show slider value*/}
        <Text style={styles.headerText}>Value of slider is : {this.state.sliderValue}</Text>

        {/*Slider with max, min, step and initial value*/}
        <Slider
          maximumValue={100}
          minimumValue={0}
          minimumTrackTintColor="#307ecc"
          maximumTrackTintColor="#000000"
          step={1}
          value={this.state.sliderValue}
          onValueChange={(sliderValue) => this.setState({ sliderValue })}
          style={{ width: 300, height: 40 }}
        />

      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create slider/seekbar layout in react native application that helps to select a single value from a range of values.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet, Platform } from 'react-native';
import Slider from '@react-native-community/slider';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //Initial Value of slider
      sliderValue: 15
    };
  }

  render() {
    return (
      <View style={[styles.container, { backgroundColor: this.state.ColorHolder }]} >

        {/*Text to show slider value*/}
        <Text style={styles.headerText}>Value of slider is : {this.state.sliderValue}</Text>

        {/*Slider with max, min, step and initial value*/}
        <Slider
          maximumValue={100}
          minimumValue={0}
          minimumTrackTintColor="#307ecc"
          maximumTrackTintColor="#000000"
          step={1}
          value={this.state.sliderValue}
          onValueChange={(sliderValue) => this.setState({ sliderValue })}
          style={{ width: 300, height: 40 }}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    headerText: {
      fontSize: 25,
      textAlign: "center",
      margin: 10,
      color: 'black',
      fontWeight: "bold"
    },

  });

Screenshot :

This is all about React Native Slider/Seekbar Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.