or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility-limits.mdcore-component.mdindex.mdplatform-features.mdprogrammatic-control.mdstep-indicators.md
tile.json

tessl/npm-react-native-community--slider

React Native component used to select a single value from a range of values.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native-community/slider@5.0.x

To install, run

npx @tessl/cli install tessl/npm-react-native-community--slider@5.0.0

index.mddocs/

React Native Community Slider

React Native Community Slider is a cross-platform slider component that enables users to select a single value from a range of values. It provides extensive customization options including track colors, thumb styling, step values, visual markers, and supports both horizontal and vertical orientations across iOS, Android, Windows, and Web platforms.

Package Information

  • Package Name: @react-native-community/slider
  • Package Type: npm
  • Language: TypeScript (React Native)
  • Installation: npm install @react-native-community/slider or yarn add @react-native-community/slider
  • Platforms: iOS, Android, Windows, Web

Core Imports

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

For importing types:

import Slider, { 
  SliderProps, 
  SliderRef, 
  MarkerProps, 
  TrackMarksProps,
  SliderIOS 
} from '@react-native-community/slider';

For CommonJS:

const Slider = require('@react-native-community/slider').default;

Basic Usage

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

function MySlider() {
  const [value, setValue] = useState(0.5);

  return (
    <View>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={0}
        maximumValue={1}
        value={value}
        onValueChange={setValue}
        minimumTrackTintColor="#FFFFFF"
        maximumTrackTintColor="#000000"
      />
    </View>
  );
}

Architecture

The React Native Community Slider is built around several key components:

  • Main Slider Component: The primary interface that handles props, state management, and rendering
  • Native Component Layer: Platform-specific native implementations using React Native Codegen
  • Step Indicators System: Optional visual markers and numbers for discrete value selection
  • Cross-Platform Support: Consistent API with platform-specific optimizations and features

Capabilities

Core Slider Component

The main Slider component providing value selection from a customizable range with extensive styling and behavior options.

interface SliderProps extends ViewProps {
  // Core value props
  value?: number;
  minimumValue?: number;
  maximumValue?: number;
  step?: number;
  disabled?: boolean;
  
  // Event handlers
  onValueChange?: (value: number) => void;
  onSlidingStart?: (value: number) => void;
  onSlidingComplete?: (value: number) => void;
  
  // Visual styling
  minimumTrackTintColor?: ColorValue;
  maximumTrackTintColor?: ColorValue;
  thumbTintColor?: ColorValue;
  style?: StyleProp<ViewStyle>;
  testID?: string;
  inverted?: boolean;
  
  // iOS-specific props
  maximumTrackImage?: ImageURISource;
  minimumTrackImage?: ImageURISource;
  thumbImage?: ImageURISource;
  trackImage?: ImageURISource;
  tapToSeek?: boolean;
  
  // Windows-specific props
  vertical?: boolean;
  
  // Step indicators
  StepMarker?: FC<MarkerProps>;
  renderStepNumber?: boolean;
  
  // Accessibility
  accessibilityUnits?: string;
  accessibilityIncrements?: Array<string>;
  
  // Value limits
  lowerLimit?: number;
  upperLimit?: number;
}

default export class Slider extends React.Component<SliderProps> {}

Core Component

Platform-Specific Features

Platform-specific props and behaviors for iOS images, Windows vertical orientation, and Android styling.

interface SliderPropsIOS extends ViewProps {
  maximumTrackImage?: ImageURISource;
  minimumTrackImage?: ImageURISource;
  tapToSeek?: boolean;
  thumbImage?: ImageURISource;
  trackImage?: ImageURISource;
}

interface SliderPropsWindows extends ViewProps {
  vertical?: boolean;
}

interface SliderPropsAndroid extends ViewProps {
  thumbTintColor?: string;
}

Platform Features

Step Indicators & Visual Markers

Advanced features for creating step-based sliders with custom markers and visual indicators.

interface MarkerProps {
  stepMarked: boolean;
  currentValue: number;
  index: number;
  min: number;
  max: number;
}

interface SliderStepProps {
  StepMarker?: FC<MarkerProps>;
  renderStepNumber?: boolean;
}

Step Indicators

Accessibility & Limits

Accessibility features and value limits for enhanced user experience and control.

interface SliderAccessibilityProps {
  accessibilityUnits?: string;
  accessibilityIncrements?: Array<string>;
  lowerLimit?: number;
  upperLimit?: number;
}

Accessibility & Limits

Programmatic Control

Reference-based methods for programmatic value updates and control.

interface SliderRef {
  updateValue(value: number): void;
}

type SliderReferenceType =
  | (React.MutableRefObject<SliderRef> & React.LegacyRef<Slider>)
  | undefined;

Programmatic Control

Types

React Native Types

// From React Native core
import type { 
  ViewProps, 
  StyleProp, 
  ViewStyle, 
  ColorValue,
  ImageURISource 
} from 'react-native';

// From React
import type { FC } from 'react';

Core Types

type Constructor<T> = new (...args: any[]) => T;

type SliderReferenceType =
  | (React.MutableRefObject<SliderRef> & React.LegacyRef<Slider>)
  | undefined;

interface SliderRef {
  updateValue(value: number): void;
}

interface MarkerProps {
  stepMarked: boolean;
  currentValue: number;
  index: number;
  min: number;
  max: number;
}

interface TrackMarksProps {
  isTrue: boolean;
  index: number;
  thumbImage?: ImageURISource;
  StepMarker?: FC<MarkerProps>;
  currentValue: number;
  min: number;
  max: number;
}

export type SliderIOS = Slider;

Platform Integration Types

interface SliderProps
  extends SliderPropsIOS,
    SliderPropsAndroid,
    SliderPropsWindows {
  // All platform-specific props are merged into SliderProps
}