### Install React Native Awesome Slider with Yarn

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/get-started.mdx

Installs the React Native Awesome Slider library using Yarn. The specific version to install depends on the version of react-native-gesture-handler being used. Ensure you have Reanimated v2 and react-native-gesture-handler properly installed first.

```bash
yarn add react-native-awesome-slider
```

```bash
yarn add react-native-awesome-slider@1
```

--------------------------------

### Basic Usage of React Native Awesome Slider

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/get-started.mdx

Demonstrates the basic integration of the Slider component from react-native-awesome-slider. It utilizes shared values from 'react-native-reanimated' for progress, minimum, and maximum values, and requires basic styling.

```jsx
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}
    />
  );
};
```

--------------------------------

### Discrete Slider with Steps and Custom Marks

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Shows how to configure the Slider for discrete value selection using 'step', 'steps', and 'snapToStep' props. This example also demonstrates custom rendering of slider marks using the 'renderMark' prop, allowing for visual indicators at specific intervals.

```jsx
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>
      )}
    />
  );
}
```

--------------------------------

### Slider with Haptic Feedback Integration

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Explains how to integrate haptic feedback with the slider using the 'onHapticFeedback' and 'hapticMode' props. This example shows triggering a 'selection' haptic feedback event when the slider value changes, enhancing user experience, especially in discrete modes.

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

--------------------------------

### Basic Slider Example with React Native Reanimated

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Demonstrates the fundamental usage of the Slider component from 'react-native-awesome-slider'. It utilizes 'react-native-reanimated' for shared values to control the slider's progress and range. This example sets up a simple slider with minimum and maximum values.

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

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

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      style={styles.slider}
    />
  );
}
```

--------------------------------

### Step-based Slider with Snap-to-Step Functionality

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example shows how to implement a step-based slider where the selection snaps to predefined steps. The `steps` prop defines the number of steps, and `forceSnapToStep` ensures the slider adheres to these steps. `stepTimingOptions` can be used to control the animation duration when snapping. Custom `markStyle` can also be applied.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { View, StyleSheet } from 'react-native';

export function StepSlider() {
  const progress = useSharedValue(50);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <View style={styles.container}>
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        steps={10}
        forceSnapToStep
        stepTimingOptions={{ duration: 200 }}
        markStyle={styles.mark}
        onValueChange={(value) => {
          console.log(`Step value: ${value}`);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  mark: {
    backgroundColor: '#ffffff',
    height: 4,
  },
});
```

--------------------------------

### Advanced Snap Threshold Configuration for Slider in React Native

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example demonstrates how to configure advanced snapping behavior for the slider. The `snapThreshold` and `snapThresholdMode` props allow for magnetic snapping to steps within a specified distance, enhancing user control. `stepTimingOptions` can be used to animate the snapping motion.

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

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

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      steps={10}
      snapThreshold={5}
      snapThresholdMode="percentage"
      stepTimingOptions={{ duration: 150 }}
      markWidth={6}
      onValueChange={(value) => {
        console.log(`Snapped value: ${value}`);
      }}
    />
  );
}
```

--------------------------------

### Custom Bubble Rendering for Slider

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Demonstrates advanced customization of the slider's bubble (tooltip) using the 'renderBubble' prop. This allows for completely custom UI elements to display the slider's value. Props like 'bubbleTranslateY' and 'bubbleWidth' offer further control over the bubble's appearance and positioning.

```jsx
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}
    />
  );
}
```

--------------------------------

### Custom Theming for React Native Slider

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Illustrates how to apply custom themes to the Slider component using the 'theme' prop. This allows developers to override default colors for the minimum track, maximum track, and cache track, enabling full control over the slider's visual appearance to match application design.

```jsx
function ThemedSlider() {
  return (
    <Slider
      // ... other props
      theme={{
        minimumTrackTintColor: '#007AFF',
        maximumTrackTintColor: '#DEDEDE',
        cacheTrackTintColor: '#F2F2F2',
      // ...其他属性
      step={10}
      steps={10}
      snapToStep={true}
    />
  );
};

```

--------------------------------

### Customize React Native Awesome Slider Theme

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/get-started.mdx

Shows how to customize the appearance of the Slider component using the 'theme' prop. Various color properties can be modified to change the look of the track, bubble, and heartbeat.

```jsx
<Slider
  theme={{
    disableMinTrackTintColor: '#fff',
    maximumTrackTintColor: '#fff',
    minimumTrackTintColor: '#000',
    cacheTrackTintColor: '#333',
    bubbleBackgroundColor: '#666',
    heartbeatColor: '#999',
  }}
/>
```

--------------------------------

### Basic Slider Usage in React Native

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/README.md

Demonstrates the fundamental implementation of the Slider component in a React Native application. It utilizes `useSharedValue` from `react-native-reanimated` to manage the slider's progress, minimum, and maximum values. Ensure Reanimated v2 and react-native-gesture-handler are installed.

```jsx
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} />;
};
```

--------------------------------

### Custom Thumb and Track Rendering for Slider in React Native

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example shows how to fully customize the appearance of the slider's thumb and track using custom React Native components. The `renderThumb` prop allows for a custom JSX element to be rendered as the thumb, and `containerStyle` can be used to style the overall slider container.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { View } from 'react-native';

export function CustomSlider() {
  const progress = useSharedValue(50);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      thumbWidth={24}
      sliderHeight={8}
      renderThumb={() => (
        <View
          style={{
            width: 24,
            height: 24,
            borderRadius: 12,
            backgroundColor: '#10b981',
            borderWidth: 3,
            borderColor: '#ffffff',
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.3,
            shadowRadius: 4,
          }}
        />
      )}
      containerStyle={{
        borderRadius: 8,
      }}
    />
  );
}
```

--------------------------------

### Video Player Slider with Progress and Cache

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/examples.mdx

Illustrates how to use the Slider component for a video player interface. It showcases the 'cache' prop for displaying buffered progress and the 'bubble' prop for custom time formatting. The 'disableTrackFollow' prop is used to prevent the slider track from moving with the thumb, typical for video players.

```jsx
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}
    />
  );
}
```

--------------------------------

### Scrubbing State Detection for Video Player Slider in React Native

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example demonstrates how to track the scrubbing state of the slider, which is useful for video player controls. The `isScrubbing` prop, managed by `useSharedValue`, allows the application to know when the user is actively dragging the slider. The `useEffect` hook includes logic for auto-playing content when not scrubbing.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { useEffect } from 'react';

export function VideoPlayerSlider() {
  const progress = useSharedValue(0);
  const isScrubbing = useSharedValue(false);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  useEffect(() => {
    // Auto-play when not scrubbing
    const interval = setInterval(() => {
      if (!isScrubbing.value && progress.value < max.value) {
        progress.value += 1;
      }
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      isScrubbing={isScrubbing}
      disableTrackFollow={false}
      onSlidingStart={() => {
        console.log('User started scrubbing');
      }}
      onSlidingComplete={(value) => {
        console.log(`Seeked to: ${value}`);
      }}
    />
  );
}
```

--------------------------------

### Haptic Feedback Slider with React Native Reanimated and Expo Haptics

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example demonstrates a slider that provides haptic feedback on interaction. It utilizes `react-native-reanimated` for state management and `expo-haptics` for generating haptic feedback. The `onHapticFeedback` prop is used to trigger the haptic effect when the slider's value changes to a new step.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider, HapticModeEnum } from 'react-native-awesome-slider';
import * as Haptics from 'expo-haptics';

export function HapticSlider() {
  const progress = useSharedValue(5);
  const min = useSharedValue(0);
  const max = useSharedValue(10);

  const handleHaptic = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  };

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      steps={10}
      forceSnapToStep
      hapticMode={HapticModeEnum.STEP}
      onHapticFeedback={handleHaptic}
      onValueChange={(value) => {
        console.log(`Haptic step: ${value}`);
      }}
    />
  );
}
```

--------------------------------

### Slider with Custom Bubble Formatter for Time Display

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example demonstrates how to customize the bubble tooltip's displayed value using the `bubble` prop. A custom function `formatTime` is provided to format the slider's value (in seconds) into a human-readable time string (MM:SS). The `bubbleMaxWidth` and `bubbleTextStyle` props allow further customization of the tooltip's appearance.

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

export function TimeSlider() {
  const progress = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(3600); // 1 hour in seconds

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      bubble={formatTime}
      bubbleMaxWidth={120}
      bubbleTextStyle={{ fontSize: 14, fontWeight: 'bold' }}
      onValueChange={(value) => {
        console.log(`Time: ${formatTime(value)}`);
      }}
    />
  );
}
```

--------------------------------

### Pan Direction Enum Definition (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Defines an enumeration for tracking the direction of a pan gesture within the slider. This enum helps in interpreting user interactions like left, right, start, and end movements.

```typescript
enum PanDirectionEnum {
  START = 0, // Pan gesture started
  LEFT = 1, // Panning left
  RIGHT = 2, // Panning right
  END = 3, // Pan gesture ended
}
```

--------------------------------

### RTL Support and Direction Detection for Slider in React Native

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example showcases the slider's support for Right-to-Left (RTL) layouts and the ability to detect the pan direction during interaction. The `isRTL` prop enables RTL mode, and `panDirectionValue` tracks whether the user is swiping left or right. This is useful for internationalization and precise gesture control.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider, PanDirectionEnum } from 'react-native-awesome-slider';

export function RTLSlider() {
  const progress = useSharedValue(30);
  const panDirection = useSharedValue(PanDirectionEnum.START);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      isRTL={true}
      panDirectionValue={panDirection}
      onValueChange={(value) => {
        const direction = 
          panDirection.value === PanDirectionEnum.LEFT
            ? 'left'
            : panDirection.value === PanDirectionEnum.RIGHT
            ? 'right'
            : 'idle';
        console.log(`Value: ${value}, Direction: ${direction}`);
      }}
    />
  );
}
```

--------------------------------

### Slider with Cache Indicator for Media Playback

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This snippet implements a slider with a cache indicator, suitable for media players. It uses an additional `cache` shared value to represent the buffered progress. The `cacheTrackTintColor` prop customizes the appearance of the cache bar. The example includes a `useEffect` hook to simulate cache loading over time.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { useEffect } from 'react';

export function MediaSlider() {
  const progress = useSharedValue(0);
  const cache = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  // Simulate cache loading
  useEffect(() => {
    const interval = setInterval(() => {
      if (cache.value < max.value) {
        cache.value = Math.min(cache.value + 5, max.value);
      }
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <Slider
      progress={progress}
      cache={cache}
      minimumValue={min}
      maximumValue={max}
      theme={{
        minimumTrackTintColor: '#ef4444',
        maximumTrackTintColor: '#1e293b',
        cacheTrackTintColor: '#475569',
      }}
    />
  );
}
```

--------------------------------

### Configure Slider Gestures to Prevent Scroll Conflicts

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example illustrates how to configure the slider's gesture handling to prevent conflicts with parent scroll views. Props like `activeOffsetX`, `failOffsetY`, and `panHitSlop` are used to fine-tune the gesture recognition. This ensures that vertical scrolling is prioritized when needed, while horizontal sliding on the slider still functions correctly. It requires `react-native-reanimated` and `react-native-awesome-slider`.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { ScrollView } from 'react-native';

export function ScrollableSlider() {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <ScrollView>
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        activeOffsetX={[-10, 10]}
        failOffsetY={[-20, 20]}
        panHitSlop={{ top: 20, bottom: 20, left: 0, right: 0 }}
        onValueChange={(value) => {
          console.log(`Scroll-safe value: ${value}`);
        }}
      />
    </ScrollView>
  );
}

```

--------------------------------

### Disable Slider and Track Press Interaction

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This example demonstrates how to disable the slider's interaction entirely using the `disable` prop and how to prevent users from interacting with the track by setting `disableTrackPress` to true. It uses `react-native-reanimated` for shared values and `react-native-awesome-slider` for the slider component. The state management for disabling is handled by React's `useState` hook.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { useState } from 'react';
import { Button, View } from 'react-native';

export function ControlledSlider() {
  const progress = useSharedValue(50);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  const [disabled, setDisabled] = useState(false);

  return (
    <View>
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        disable={disabled}
        disableTrackPress={true}
        thumbTouchSize={30}
        theme={{
          disableMinTrackTintColor: '#9ca3af',
        }}
      />
      <Button
        title={disabled ? 'Enable' : 'Disable'}
        onPress={() => setDisabled(!disabled)}
      />
    </View>
  );
}

```

--------------------------------

### Implement Custom Bubble Tooltip Component

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This code snippet demonstrates the usage of the standalone `Bubble` component from `react-native-awesome-slider`. It shows how to dynamically update the bubble's text content using a `useRef` and `useEffect` hook, simulating a tooltip that displays a random percentage. This component is useful for custom UI implementations where a tooltip is needed alongside other elements. It requires `react-native-awesome-slider`.

```tsx
import { Bubble, BubbleRef } from 'react-native-awesome-slider';
import { useRef, useEffect } from 'react';
import { View } from 'react-native';

export function CustomBubbleExample() {
  const bubbleRef = useRef<BubbleRef>(null);

  useEffect(() => {
    const interval = setInterval(() => {
      const value = Math.floor(Math.random() * 100);
      bubbleRef.current?.setText(`${value}%`);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <View style={{ padding: 50 }}>
      <Bubble
        ref={bubbleRef}
        color="#8b5cf6"
        textColor="#ffffff"
        bubbleMaxWidth={100}
        textStyle={{ fontSize: 16, fontWeight: '600' }}
      />
    </View>
  );
}

```

--------------------------------

### Step-based Slider

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

A discrete slider that snaps to predefined steps. Ideal for settings with fixed options. Includes options for step count and snap behavior.

```APIDOC
## Step-based Slider

### Description
Discrete slider with predefined steps and snap-to-step behavior.

### Method
React Component

### Endpoint
N/A (Component-based API)

### Parameters
#### Props (Inherited from Slider, plus specific ones)
- **steps** (number) - Optional - The number of discrete steps for the slider.
- **forceSnapToStep** (boolean) - Optional - If true, the slider will always snap to the nearest step.
- **stepTimingOptions** (object) - Optional - Configuration for the animation timing when snapping to a step.
  - **duration** (number) - Optional - Duration of the snap animation in milliseconds.
- **markStyle** (object) - Optional - Style for the marks indicating steps on the slider track.

### Request Example
```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { View, StyleSheet } from 'react-native';

export function StepSlider() {
  const progress = useSharedValue(50);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <View style={styles.container}>
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        steps={10}
        forceSnapToStep
        stepTimingOptions={{ duration: 200 }}
        markStyle={styles.mark}
        onValueChange={(value) => {
          console.log(`Step value: ${value}`);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  mark: {
    backgroundColor: '#ffffff',
    height: 4,
  },
});
```

### Response
#### Success Response (N/A - Component renders UI)
- N/A

#### Response Example
N/A
```

--------------------------------

### Custom Bubble Formatter

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

Allows custom formatting of the value displayed in the bubble tooltip. Useful for displaying time, currency, or other formatted values.

```APIDOC
## Custom Bubble Formatter

### Description
Slider with custom value display formatting in the bubble tooltip.

### Method
React Component

### Endpoint
N/A (Component-based API)

### Parameters
#### Props (Inherited from Slider, plus specific ones)
- **bubble** (function) - Optional - A function that takes the current slider value and returns a formatted string to display in the bubble.
- **bubbleMaxWidth** (number) - Optional - Maximum width for the bubble tooltip.
- **bubbleTextStyle** (object) - Optional - Style object for the text within the bubble tooltip.

### Request Example
```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export function TimeSlider() {
  const progress = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(3600); // 1 hour in seconds

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      bubble={formatTime}
      bubbleMaxWidth={120}
      bubbleTextStyle={{ fontSize: 14, fontWeight: 'bold' }}
      onValueChange={(value) => {
        console.log(`Time: ${formatTime(value)}`);
      }}
    />
  );
}
```

### Response
#### Success Response (N/A - Component renders UI)
- N/A

#### Response Example
N/A
```

--------------------------------

### Basic Slider Component Usage in React Native

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This snippet demonstrates the basic usage of the Slider component for continuous value selection. It requires shared values for progress, minimum, and maximum values from 'react-native-reanimated'. The `onValueChange` and `onSlidingComplete` props handle user interactions, and the `theme` prop allows customization of track and bubble colors.

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

export default function App() {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      onValueChange={(value) => console.log('Current value:', value)}
      onSlidingComplete={(value) => console.log('Final value:', value)}
      theme={{
        minimumTrackTintColor: '#3b82f6',
        maximumTrackTintColor: '#94a3b8',
        bubbleBackgroundColor: '#3b82f6',
      }}
    />
  );
}
```

--------------------------------

### Default Pan Hit Slop Configuration (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Sets the default sensitivity area (hit slop) for the pan gesture detector. This allows for a more forgiving touch interaction around the slider thumb.

```typescript
{
  top: 8,
  left: 0,
  bottom: 8,
  right: 0
}
```

--------------------------------

### Default Slider Theme Configuration (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Specifies the default color scheme for the slider's various track elements and the bubble background. This configuration can be overridden by providing a custom theme object.

```typescript
{
  minimumTrackTintColor: '#1890ff',
  maximumTrackTintColor: '#e5e5e5',
  cacheTrackTintColor: '#cacaca',
  disableMinTrackTintColor: '#999999',
  bubbleBackgroundColor: '#ffffff',
  heartbeatColor: '#1890ff'
}
```

--------------------------------

### Slider Theme Interface Definition (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Defines the TypeScript interface for customizing the slider's theme. This allows developers to specify colors for different parts of the slider, including tracks and animations.

```typescript
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 Slider Container Style (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Defines the default styling for the slider's container, including its dimensions, border, and background. This style sets the foundational appearance of the slider track.

```typescript
{
  width: '100%',
  height: 5,
  borderRadius: 2,
  borderColor: 'transparent',
  overflow: 'hidden',
  borderWidth: 1,
  backgroundColor: maximumTrackTintColor
}
```

--------------------------------

### Default Slider Marks Style (TypeScript)

Source: https://github.com/alantoa/react-native-awesome-slider/blob/main/docs/src/pages/docs/api-reference.mdx

Provides the default styling for any marks or indicators displayed on the slider track. This includes dimensions, color, and positioning.

```typescript
{
  width: 4,
  height: 4,
  backgroundColor: '#fff',
  position: 'absolute',
  top: 2
}
```

--------------------------------

### Implement Heartbeat Animation on Slider Track

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

This snippet shows how to add a pulsing animation effect to the slider's track using the `heartbeat` prop. The animation is controlled by a state variable and can be toggled on or off. The `onSlidingStart` and `onSlidingComplete` event handlers are used to manage the visibility of the heartbeat animation during user interaction. Dependencies include `react-native-reanimated` and `react-native-awesome-slider`.

```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { useState } from 'react';

export function HeartbeatSlider() {
  const progress = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  const [showHeartbeat, setShowHeartbeat] = useState(true);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      heartbeat={showHeartbeat}
      theme={{
        minimumTrackTintColor: '#ef4444',
        maximumTrackTintColor: '#1e293b',
        heartbeatColor: '#fca5a5',
      }}
      onSlidingStart={() => setShowHeartbeat(false)}
      onSlidingComplete={() => setShowHeartbeat(true)}
    />
  );
}

```

--------------------------------

### Slider Component

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

The main Slider component for interactive value selection with animation support. It accepts shared values for progress, minimum, and maximum values, and provides callbacks for value changes.

```APIDOC
## Slider Component

### Description
Main slider component providing interactive value selection with animation support.

### Method
React Component

### Endpoint
N/A (Component-based API)

### Parameters
#### Props
- **progress** (SharedValue<number>) - Required - The current value of the slider.
- **minimumValue** (SharedValue<number>) - Required - The minimum possible value for the slider.
- **maximumValue** (SharedValue<number>) - Required - The maximum possible value for the slider.
- **onValueChange** (callback) - Optional - Function called when the slider value changes.
- **onSlidingComplete** (callback) - Optional - Function called when the user finishes sliding.
- **theme** (object) - Optional - Customizes the appearance of the slider tracks and bubble.
  - **minimumTrackTintColor** (string) - Optional - Color of the track before the thumb.
  - **maximumTrackTintColor** (string) - Optional - Color of the track after the thumb.
  - **bubbleBackgroundColor** (string) - Optional - Background color of the value bubble.

### Request Example
```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export default function App() {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      onValueChange={(value) => console.log('Current value:', value)}
      onSlidingComplete={(value) => console.log('Final value:', value)}
      theme={{
        minimumTrackTintColor: '#3b82f6',
        maximumTrackTintColor: '#94a3b8',
        bubbleBackgroundColor: '#3b82f6',
      }}
    />
  );
}
```

### Response
#### Success Response (N/A - Component renders UI)
- N/A

#### Response Example
N/A
```

--------------------------------

### Slider with Cache Indicator

Source: https://context7.com/alantoa/react-native-awesome-slider/llms.txt

A slider component enhanced with a cache indicator, suitable for media players to visualize buffered content. Uses the `cache` prop to display the buffered progress.

```APIDOC
## Slider with Cache Indicator

### Description
Slider displaying buffered/cached content, ideal for media players.

### Method
React Component

### Endpoint
N/A (Component-based API)

### Parameters
#### Props (Inherited from Slider, plus specific ones)
- **cache** (SharedValue<number>) - Optional - The current cache progress value.
- **theme** (object) - Optional - Customizes the appearance of the slider tracks and bubble.
  - **cacheTrackTintColor** (string) - Optional - Color of the track representing cached progress.

### Request Example
```tsx
import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
import { useEffect } from 'react';

export function MediaSlider() {
  const progress = useSharedValue(0);
  const cache = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(100);

  // Simulate cache loading
  useEffect(() => {
    const interval = setInterval(() => {
      if (cache.value < max.value) {
        cache.value = Math.min(cache.value + 5, max.value);
      }
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <Slider
      progress={progress}
      cache={cache}
      minimumValue={min}
      maximumValue={max}
      theme={{
        minimumTrackTintColor: '#ef4444',
        maximumTrackTintColor: '#1e293b',
        cacheTrackTintColor: '#475569',
      }}
    />
  );
}
```

### Response
#### Success Response (N/A - Component renders UI)
- N/A

#### Response Example
N/A
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.