DOCSEARCHbyAlgolia
Submit Docs

react-native-awesome-slider

repository·main·Indexed 19 days ago

https://github.com/alantoa/react-native-awesome-slider

A versatile, responsive <Slider /> component for React Native and Web, version 2.9.0. It supports discrete and continuous sliding with high performance via Reanimated. Key features include haptic feedback, custom bubbles, thumbs, and marks, as well as support for cache tracking (useful for media players) and Right-to-Left (RTL) mode.

Tokens
7.4K
Snippets
26
Records
35
Agent score
62%

What's inside react-native-awesome-slider

  1. Overview of React Native Awesome Slider features

    main

    React Native Awesome Slider is a versatile, responsive slider component for React Native and Web. It supports several interaction and customization modes:

    Core Features

    • Discrete sliding: Movement in specific increments.
    • Continuous sliding: Smooth, uninterrupted movement.
    • Step control: Controlling the increments of the slider.
    • Snapping behavior: Snapping to specific points.

    Interaction

    • Scrubbing control: Precise control via dragging.
    • Haptic feedback: Tactile response during interaction.

    Customization

    • Custom thumb: Replace the default slider handle.
    • Custom bubble tooltip: Customize the value indicator.
    • Custom mark: Customize the scale markings.
    • Customizable appearance: General styling options.

    Common 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.

  2. Install react-native-awesome-slider

    main

    Before installing, ensure you have followed the installation instructions for Reanimated v2 and react-native-gesture-handler.

    Depending on your version of react-native-gesture-handler, choose the appropriate installation command:

    • For react-native-gesture-handler version >= 2:
      yarn add react-native-awesome-slider
    - For older versions of `react-native-gesture-handler`:
  ```bash
yarn add react-native-awesome-slider@1

  3. Run the Awesome Slider example project

    main

    To explore the capabilities of react-native-awesome-slider, you can run the provided example application. This example demonstrates features such as Light & Dark themes, custom bubbles and thumbs, Haptic mode, Lottie thumbs, and Track thumb mode.

    First, clone the repository and bootstrap the dependencies using yarn:

    git clone https://github.com/alantoa/react-native-awesome-slider.git
cd react-native-awesome-slider
yarn bootstrap

  6. Implement a Video Scrubber Pattern

    main

    For video or audio players, use the following combination of props to ensure a smooth scrubbing experience:

    1. isScrubbing: Pass an Animated.SharedValue<boolean> to track if the user is currently dragging. This allows you to sync UI states.
    2. cache: Pass an Animated.SharedValue<number> representing the buffered/cached portion of the media. This renders a bar behind the progress.
    3. disableTrackFollow: Set to true if you want the progress bar to only update when the user releases the thumb, rather than moving continuously while dragging.
    4. onTap: Use this to handle seeking when a user taps a specific part of the track.
    const isScrubbing = useSharedValue(false);
const cache = useSharedValue(50);

<Slider
  progress={progress}
  minimumValue={0}
  maximumValue={100}
  cache={cache}
  isScrubbing={isScrubbing}
  disableTrackFollow={true}
  onTap={() => handleSeek()}
  {...otherProps}
/>

  7. Configure the Slider Theme

    main

    The theme prop allows you to customize the colors of various slider elements using the SliderTheme interface.

    interface SliderTheme {
  minimumTrackTintColor: string; // Progress track color
  maximumTrackTintColor: string; // Background track color
  cacheTrackTintColor: string; // Cache track color
  disableMinTrackTintColor: string; // Disabled track color
  bubbleBackgroundColor: string; // Bubble background color
  heartbeatColor: string; // Heartbeat animation color
}

    Default Theme Values:

    • minimumTrackTintColor: '#1890ff'
    • maximumTrackTintColor: '#e5e5e5'
    • cacheTrackTintColor: '#cacaca'
    • disableMinTrackTintColor: '#999999'
    • bubbleBackgroundColor: '#ffffff'
    • heartbeatColor: '#1890ff'
    <AwesomeSlider
  theme={{
    minimumTrackTintColor: 'red',
    maximumTrackTintColor: 'gray',
    bubbleBackgroundColor: 'white',
    // ... other keys
  }}
/>

  8. Implement a Discrete Slider with Steps

    main

    To create a slider that snaps to specific intervals, use the step and steps props along with snapToStep. You can customize the visual markers for each step using the renderMark function, which provides the current index.

    function DiscreteSlider() {
  const progress = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      // Enable step mode
      step={10}
      steps={10}
      snapToStep
      // Custom mark rendering
      renderMark={({ index }) => (
        <View style={styles.mark}>
          <Text>{index * 10}</Text>
        </View>
      )}
    />
  );
}

  9. Apply a Custom Theme

    main

    Use the theme prop to customize the colors of the slider tracks. Key properties include:

    • minimumTrackTintColor: Color of the progress track.
    • maximumTrackTintColor: Color of the unvisited track.
    • cacheTrackTintColor: Color of the buffered/cached track.
    function ThemedSlider() {
  return (
    <Slider
      // ... other props
      theme={{
        minimumTrackTintColor: '#007AFF',
        maximumTrackTintColor: '#DEDEDE',
        cacheTrackTintColor: '#F2F2F2',
      }}
      // ... other props
      step={10}
      steps={10}
      snapToStep={true}
    />
  };
}

  10. Customize the Slider Bubble

    main

    You can completely override the slider's value bubble using renderBubble. This function receives the current value. Additionally, you can adjust the bubble's position and size using bubbleTranslateY and bubbleWidth.

    function CustomBubbleSlider() {
  return (
    <Slider
      // ... other props
      renderBubble={({ value }) => (
        <View style={styles.customBubble}>
          <Text style={styles.bubbleText}>{Math.round(value)}%</Text>
        </View>
      )}
      bubbleTranslateY={-30}
      bubbleWidth={40}
    />
  );
}

  11. Create a Video Player Slider

    main

    For video playback, use the cache prop to track buffered progress and the bubble prop to format the displayed time. Setting disableTrackFollow prevents the track from following the thumb, which is often preferred for video seek bars. You can also use containerStyle for custom layout.

    function VideoPlayerSlider() {
  // Initialize values for video progress
  const progress = useSharedValue(0);
  const cache = useSharedValue(0);
  const duration = useSharedValue(300);

  return (
    <Slider
      progress={progress}
      cache={cache}
      minimumValue={useSharedValue(0)}
      maximumValue={duration}
      // Format time for bubble display
      bubble={(value) => formatTime(value)}
      // Disable track follow for video player
      disableTrackFollow
      // Custom styles
      containerStyle={styles.videoSlider}
    />
  );
}

  12. Add Haptic Feedback to the Slider

    main

    To provide tactile feedback, use the onHapticFeedback callback. You can control when feedback occurs by setting hapticMode (e.g., 'STEP') and defining the granularity with step and steps props.

    function HapticSlider() {
  return (
    <Slider
      // ... other props
      onHapticFeedback={() => {
        HapticFeedback.trigger('selection');
      }}
      hapticMode="STEP"
      step={20}
      steps={5}
    />
  );
}