Published on

How to use react-native-awesome-slider?

Authors
JSThread to JSThread, UIThread to UIThread.

React Native Awesome Slider

Typescript Slider component powered by Reanimated v2 and react-native-gesture-handler.


Installation

First you have to follow installation instructions of Reanimated v2 and react-native-gesture-handler

yarn add react-native-awesome-slider

Example usage

import { useSharedValue } from 'react-native-reanimated'
import { Slider } from 'react-native-awesome-slider'

export const Example = () => {
  const progress = useSharedValue(30)
  const min = useSharedValue(0)
  const max = useSharedValue(100)
  return (
    <Slider style={styles.container} progress={progress} minimumValue={min} maximumValue={max} />
  )
}

Why use this library?

  • Pure javascript slider implementations usually rely on react-native's gesture events which may inadvertently trigger 'swipe to go back' events as you pan the slider. ❌
  • Native sliders rely on state updates, which can cause performance issues. ❌

react-native-awesome-slider relies on reanimated's ShareValue ability to run code directly in the UIThread to enhance performance, and react-native-gesture-handle won't interfere with your swiping gestures. ✨

Features

  • 100% written in TypeScript.
  • 100% built upon react-native-reanimated and react-native-gusture-handle.
  • Supports Tap & Pan triggering.
  • and more...

TODO list

  • Add RTL support
  • Optimize arrows
  • Rewrite using react-native-gesture-handle v2
  • ...

Configuration

The <Slider/> component has the following configuration properties:

NameTypeDescriptionRequiredDefault Value
minimumTrackTintColorstringcolor applied to track from the min position up to the thumb positionrgba(61, 219, 209, 1)
maximumTrackTintColorstringcolor applied to track from the thumb position up to the maximum positionrgba(195, 197, 199, 1)
cacheTrackTintColorstringcache track tint colorrgba(39, 41, 46, 1)
styleViewStyle
borderColorstringColor of the border of the slider, also you can use containerStyle .transparent
bubble(number) => stringGet the current value of the slider as you slide it, and returns a string to be used inside the bubble.(number) => string
progressAnimated.SharedValue<number>Current value of the slider0
cacheAnimated.SharedValue<number>Cache value of the slider0
minimumValueAnimated.SharedValue<number>An Animated.SharedValue from react-native-reanimated library which is the minimum value of the slider.undefined
maximumValueAnimated.SharedValue<number>An Animated.SharedValue from react-native-reanimated library which is the maximum value of the slider.undefined
onSlidingStart() => voidCallback called when the sliding interaction startsundefined
onValueChange(number) => voidCallback called when the slider value changesundefined
onSlidingComplete(number) => voidCallback called when the sliding interaction stops. The updated slider value will be passed as argumentundefined
renderBubble() => React.ReactNodeA custom bubble component that will be rendered while sliding.See the <Bubble/> component
setBubbleText(string) => voidThis function will be called while sliding and can be used to update the text in a custom bubble component.current slider value
bubbleTranslateYnumberValue to pass to the container of the bubble as translateY7
renderThumbImage() => React.ReactNodeRender custom thumb image. If you need to customize thumb, you also need to set the thumb widthReactNode
thumbWidthnumberThumb elements width15
disablebooleanDisable user interaction with the sliderfalse
disableMinTrackTintColorstringDisable slider color. Defaults to minimumTrackTintColorrgba(61, 219, 209, 1)
disableTapEventbooleanEnable tap event change value. Defaults to truetrue
bubbleMaxWidthnumberThe maximum width of the bubble component100
bubbleTextStyleTextStyleBubble text style
bubbleContainerStyleViewStyleBubble container text style
bubbleBackgroundColorstringBubble background colorrgba(61, 219, 209, 1)
isScrubbingAnimated.SharedValue<boolean>callback slider is scrubbing statusundefined
onTap() => voidA callback for when the slider is tapped.(Useful for video-player scrubbing.)undefined
thumbScaleValueAnimated.SharedValue<number>Control thumb’s transform-scale animation.undefined
sliderHeightnumberThe height of the slider component30
containerStyleViewStylestyles to be applied to the slider container component{width: '100%', height: 5, borderRadius: 2, borderColor: borderColor, overflow: 'hidden', borderWidth: 1, backgroundColor: maximumTrackTintColor}
panHitSlopobjectpan gesture hit slop{top: 8, left: 0, bottom: 8, right:8 }