Native sliders for React Native with enhanced functionality and customization options. This component provides Material 3 sliders with comprehensive styling and behavior controls.

npm install @rn-nui/slider

or

yarn add @rn-nui/slider

Not yet supported.

You'll need to override the theme of your app under /android/app/src/main/res/values/styles.xml to inherit from Material3Expressive.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.Material3Expressive.DayNight.NoActionBar">
      <!-- Customize your theme here -->
    </style>
</resources>

There is no plugin for Expo yet. You'll need to manually edit the native files as described above.

import { Slider } from '@rn-nui/slider';

// Basic slider
<Slider
  value={sliderValue}
  onValueChange={setSliderValue}
  minValue={0}
  maxValue={100}
/>

// Customized slider with presets for size and styling
<Slider
  size="lg"
  value={sliderValue}
  onValueChange={setSliderValue}
  minValue={0}
  maxValue={100}
  stepSize={5}
  activeTrackColor="#52796f"
  inactiveTrackColor="#e9ecef"
  thumbColor="#52796f"
  labelBehavior="floating"
  tickVisibilityMode="auto-limit"
  trackIconActiveStart="check_circle"
/>

// Centered slider (e.g., for audio panning)
<Slider
  value={panValue}
  onValueChange={setPanValue}
  minValue={-50}
  maxValue={50}
  centered={true}
/>

type SliderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

Preset sizes that control track height, thumb dimensions, and border radius.

type SliderLabelBehavior = 'always-visible' | 'floating' | 'never-visible';

• 'always-visible': The label is always visible
• 'floating': The label floats above the thumb when sliding
• 'never-visible': The label is never visible, even when sliding

type SliderTickVisibility = 'auto-limit' | 'auto-hide' | 'hidden';

• 'auto-limit': Ticks are drawn. If there are too many, the maximum allowed number will be drawn
• 'auto-hide': Ticks are drawn. If there are too many, they are all hidden
• 'hidden': Ticks are always hidden (allows for snapping to points without showing ticks)

type SliderValueChangeEvent = NativeSyntheticEvent<{
  target: number;
  value: number;
}>;

Called when the slider value changes. The event object contains target and value properties.

Called when the slider value changes with just the new numeric value.

Called when the user starts sliding with the current value.

Called when the user stops sliding with the final value.

Centered	Icons	Preset sizes	Steps