Usage

import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
 
function PlayerSlider() {
  // Initialize shared values
  const progress = useSharedValue(0);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
 
  return (
    <Slider
      progress={progress}
      minimumValue={min}
      maximumValue={max}
      // Add your styles here
      style={styles.slider}
    />
  );
}

function VideoSlider() {
  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
    />
  );
}

<Slider
  theme={{
    minimumTrackTintColor: '#007AFF',
    maximumTrackTintColor: '#DEDEDE',
    cacheTrackTintColor: '#F2F2F2',
    bubbleBackgroundColor: '#007AFF',
    heartbeatColor: '#007AFF',
  }}
  // Optional: custom styles
  containerStyle={{
    height: 6,
    borderRadius: 3,
  }}
/>

<Slider
  onHapticFeedback={() => {
    // Trigger haptic feedback
    HapticFeedback.trigger('selection');
  }}
  hapticMode="STEP"
  step={10}
  // Other props...
/>

<Slider
  // Custom bubble component
  renderBubble={({ value }) => (
    <View style={styles.bubble}>
      <Text>{value}%</Text>
    </View>
  )}
  // Custom thumb component
  renderThumb={() => (
    <View style={styles.thumb}>
      <Icon name="drag-handle" />
    </View>
  )}
  // Custom mark component
  renderMark={({ index }) => (
    <View style={styles.mark}>
      <Text>{index * 10}</Text>
    </View>
  )}
/>