React Native Range Slider

Range Slider for React Native using react-native-gesture-handler.

Installation

Using Yarn:

yarn add @m15r/react-native-range-slider

Using NPM:

npm install @m15r/react-native-range-slider

If you wish to use vibration when sliding the handles, follow the installation instructions for react-native-haptic-feedback and enable the vibrate prop on your RangeSlider.

Example

import RangeSlider from '@m15r/react-native-range-slider'

export default function RangeSliderExample() {

  const handleChange = (values) => {
    // Your logic
  }

  return (
    <RangeSlider
      range={[0,100]}
      defaultValues={[25,75]}
      onChange={handleChange} />
  )
  
}

Props

Prop	Description	Default	Required
range	Array containing min. and max. values	[0,100]	✅
defaultValues	Initial values for the range slider	[25,75]	✅
onChange	Returns an array with min. and max. values
barHeight	Height of the slider bar	30
barStyle	Apply custom styling to the bar	{}
fillStyle	Apply custom styling to the fill between handles	{}
handleSize	Size of the handles	30
handleStyle	Apply custom styling to the handles	{}
vibrate	Vibrate when moving the handle using react-native-haptic-feedback	false