Skip to content

alantoa/react-native-awesome-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c8f4489 Β· Feb 19, 2025
Feb 3, 2025
Feb 3, 2025
Dec 23, 2024
Dec 29, 2024
Dec 30, 2024
Dec 30, 2024
Jan 9, 2022
Feb 12, 2024
Dec 9, 2024
Feb 3, 2025
Jul 22, 2024
Jan 9, 2022
Feb 19, 2025
Feb 12, 2024
Feb 3, 2025
Feb 23, 2024
Feb 3, 2025
Dec 7, 2024
Dec 30, 2024

Repository files navigation

React Native Awesome Slider

Reanimated v3 version npm npm Documentation Support react-native-awesome-slider on drips.network

A versatile, responsive react native and web slider component.

slider

Core Features

  • Discrete sliding
  • Continuous sliding
  • Step control
  • Snapping behavior

Interaction

  • Scrubbing control
  • Haptic feedback

Customization

  • Custom thumb
  • Custom bubble tooltip
  • Custom mark
  • Customizable appearance

Use Cases

  • Media Player Controls (video/audio progress, volume, playback speed)
  • Financial Trading Tools (position size, leverage ratio)
  • General Purpose (numeric value adjustment, settings configuration)

Installation

First, install and configure Reanimated v2 and react-native-gesture-handler

For react-native-gesture-handler version >= 2:

yarn add react-native-awesome-slider

For version < 2:

yarn add react-native-awesome-slider@1

Basic 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 progress={progress} minimumValue={min} maximumValue={max} />;
};

Documentation

For complete component props and advanced usage, visit our official documentation.

License

MIT Β© Alan Toa