@flexnative/slider

A flexible, performance-optimized, and highly customizable slider component for React Native, built with Animated and integrated with the FlexNative theme system.

Installation

npm install @flexnative/slider
# or
yarn add @flexnative/slider

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react-native-reanimated react-native-svg @flexnative/theme-context

Usage

Basic Usage

import React, { useState } from 'react';
import Slider from '@flexnative/slider';

export default function BasicExample() {
  const [value, setValue] = useState(0.5);

  return (
    <Slider
      value={value}
      onValueChange={setValue}
      minimumValue={0}
      maximumValue={1}
    />
  );
}

Custom Styling

You can easily customize the track and thumb appearance:

import Slider from '@flexnative/slider';

<Slider
  minimumTrackTintColor="#FF5733"
  maximumTrackTintColor="#D1D1D1"
  thumbTintColor="#C70039"
  trackStyle={{ height: 6 }}
  thumbStyle={{ width: 24, height: 24 }}
/>

Range Slider

To enable range selection with two thumbs, set the range prop to true and provide an array of two numbers to the value prop.

import Slider from '@flexnative/slider';

<Slider
  range
  value={[0.2, 0.8]}
  onValueChange={(values) => console.log(values)}
  minimumTrackTintColor="#FF5733"
/>

Props

Features

• Theme Integration: Automatically uses colors and spacing from @flexnative/theme-context.
• Performance: Uses PureComponent and native-driven animations for smooth interactions.
• RTL Support: Fully compatible with Right-to-Left layouts.
• Accessibility: Built-in support for accessibility labels and test IDs.