Core Slider Component

/**
 * A component used to select a single value from a range of values.
 * This is not a controlled component - you don't need to update the value during dragging.
 */
default export class Slider extends React.Component<SliderProps> {}

interface SliderProps extends ViewProps {
  /**
   * Write-only property representing the value of the slider.
   * Can be used to programmatically control the position of the thumb.
   * Entered once at the beginning still acts as an initial value.
   * The value should be between minimumValue and maximumValue,
   * which default to 0 and 1 respectively.
   * Default value is 0.
   *
   * This is not a controlled component, you don't need to update the
   * value during dragging.
   */
  value?: number;

  /**
   * Initial minimum value of the slider. Default value is 0.
   */
  minimumValue?: number;

  /**
   * Initial maximum value of the slider. Default value is 1.
   */
  maximumValue?: number;

  /**
   * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). 
   * Default value is 0.
   */
  step?: number;

  /**
   * If true the user won't be able to move the slider.
   * Default value is false.
   */
  disabled?: boolean;

  /**
   * Reverses the direction of the slider.
   */
  inverted?: boolean;

  /**
   * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.
   */
  style?: StyleProp<ViewStyle>;

  /**
   * Used to locate this view in UI automation tests.
   */
  testID?: string;
}

import React, { useState } from 'react';
import Slider from '@react-native-community/slider';

// Basic slider
function BasicSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={100}
      value={50}
    />
  );
}

// Stepped slider
function SteppedSlider() {
  const [value, setValue] = useState(0);
  
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={10}
      step={1}
      value={value}
      onValueChange={setValue}
    />
  );
}

// Disabled slider
function DisabledSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.5}
      disabled={true}
    />
  );
}

// Inverted slider
function InvertedSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.3}
      inverted={true}
    />
  );
}

interface SliderEventProps {
  /**
   * Callback continuously called while the user is dragging the slider.
   */
  onValueChange?: (value: number) => void;

  /**
   * Callback that is called when the user picks up the slider.
   * The initial value is passed as an argument to the callback handler.
   */
  onSlidingStart?: (value: number) => void;

  /**
   * Callback called when the user finishes changing the value (e.g. when the slider is released).
   */
  onSlidingComplete?: (value: number) => void;
}

import React, { useState } from 'react';
import { Alert } from 'react-native';
import Slider from '@react-native-community/slider';

function EventHandlingSlider() {
  const [value, setValue] = useState(0.5);
  const [isSliding, setIsSliding] = useState(false);

  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={value}
      onValueChange={(newValue) => {
        setValue(newValue);
        console.log('Value changing:', newValue);
      }}
      onSlidingStart={(startValue) => {
        setIsSliding(true);
        console.log('Started sliding at:', startValue);
      }}
      onSlidingComplete={(finalValue) => {
        setIsSliding(false);
        console.log('Finished sliding at:', finalValue);
        Alert.alert('Slider Complete', `Final value: ${finalValue.toFixed(2)}`);
      }}
    />
  );
}

interface SliderStyleProps {
  /**
   * The color used for the track to the left of the button.
   * Overrides the default blue gradient image on iOS.
   */
  minimumTrackTintColor?: string | ColorValue;

  /**
   * The color used for the track to the right of the button.
   * Overrides the default blue gradient image on iOS.
   */
  maximumTrackTintColor?: string | ColorValue;

  /**
   * The color used to tint the default thumb images on iOS, or the
   * color of the foreground switch grip on Android.
   */
  thumbTintColor?: string | ColorValue;
}

import React from 'react';
import Slider from '@react-native-community/slider';

// Custom colored slider
function ColoredSlider() {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.7}
      minimumTrackTintColor="#1fb28a"
      maximumTrackTintColor="#d3d3d3"
      thumbTintColor="#b9e4c7"
    />
  );
}

// Theme-based slider
function ThemedSlider({ isDark }: { isDark: boolean }) {
  return (
    <Slider
      style={{width: 200, height: 40}}
      minimumValue={0}
      maximumValue={1}
      value={0.4}
      minimumTrackTintColor={isDark ? "#ffffff" : "#000000"}
      maximumTrackTintColor={isDark ? "#666666" : "#cccccc"}
      thumbTintColor={isDark ? "#ffffff" : "#333333"}
    />
  );
}

interface SliderProps extends ViewProps, SliderEventProps, SliderStyleProps {
  value?: number;
  minimumValue?: number;
  maximumValue?: number;
  step?: number;
  disabled?: boolean;
  inverted?: boolean;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}