🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
First you have to follow installation instructions of Reanimated v2 and react-native-gesture-handler
If you react-native-gesture-handler version >= 2:
yarn add react-native-awesome-slider
else:
yarn add react-native-awesome-slider@1
Basic use:
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}
/>
);
};
Use the Theme object.
<Slider
theme={{
disableMinTrackTintColor: '#fff',
maximumTrackTintColor: '#fff',
minimumTrackTintColor: '#000',
cacheTrackTintColor: '#333',
bubbleBackgroundColor: '#666',
heartbeatColor: '#999',
}}
/>
For more usage, please view Example.
<Slider
onHapticFeedback={() => {
ReactNativeHapticFeedback.trigger('impactLight', {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false,
});
}}
/>
Set haptic mode, if you open 'step' prop, you need set hapticMode=HapticModeEnum.STEP, otherwise set to hapticMode=HapticModeEnum.BOTH.
✅ Finish!
react-native
's gesture events which may inadvertently trigger 'swipe to go back' events as you pan the slider. ❌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. ✨
TypeScript
.react-native-reanimated
and react-native-gesture-handler
.react-native-gesture-handler
v2The <Slider/>
component has the following configuration properties: