Minimal Horizontal Slider Control For React Native

A lightweight, customizable, clean-looking horizontal slider component for React Native.

How to use it:

1. Import and register the slider component.

# Yarn
$ yarn add @candlefinance/slider

# NPM
$ npm i @candlefinance/slider

import Slider from '@candlefinance/slider';

2. Add the Slider component to the app.

<Slider />

3. Available component props to customize the slider.

<Slider
  value={myValue}
  disabled={false}
  min={1}
  max={99}
  width={300}
  height={54}
  step={1}
  maximumTrackTintColor="#c7c7c7"
  minimumTrackTintColor="#ff0067"
  ballIndicatorColor="#4f4f4f"
  ballIndicatorTextColor="#ffffff"
  onChange={(value) => {
    console.log('CHANGE', value);
    setMyValue(value);
  }}
  onComplete={(value) => {
    console.log('COMPLETE', value);
  }}
/>

Preview:

Download Details:

Author: candlefinance

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/candlefinance/slider

License: MIT