Slider

A slider is a horizontal track with a control, called a thumb, that people can adjust between a minimum and maximum value.
Companion App Logo

Try It Live

In the Companion App
Apple
Apple
import * as React from 'react';
import { View } from 'react-native';

import { Slider } from '@/components/nativewindui/Slider';

export default function SliderScreen() {
  const [sliderValue, setSliderValue] = React.useState(0.5);
  return (
    <View className="flex-1 justify-center p-4">
      <Slider value={sliderValue} onValueChange={setSliderValue} />
    </View>
  );
}

Installation

1

Run the following command:

npx nwui-cli@latest add slider
🚀
Ship.
1

Add the following dependencies to your project:

npx expo install @react-native-community/slider
2

Copy/paste the following code to the specified file path:

@/components/nativewindui/Slider.tsx
import RNSlider from '@react-native-community/slider';
import { Platform } from 'react-native';

import { useColorScheme } from '@/lib/useColorScheme';
import { COLORS } from '@/theme/colors';

function Slider({
  thumbTintColor,
  minimumTrackTintColor,
  maximumTrackTintColor,
  ...props
}: React.ComponentProps<typeof RNSlider>) {
  const { colors } = useColorScheme();
  return (
    <RNSlider
      thumbTintColor={(thumbTintColor ?? Platform.OS === 'ios') ? COLORS.white : colors.primary}
      minimumTrackTintColor={minimumTrackTintColor ?? colors.primary}
      maximumTrackTintColor={
        (maximumTrackTintColor ?? Platform.OS === 'android') ? colors.primary : undefined
      }
      minimumValue={0}
      maximumValue={1}
      {...props}
    />
  );
}

export { Slider };
🛸
Ship.

Usage

import { Slider } from '@/components/nativewindui/Slider';
<Slider value={0.5} />

Props

Inherits props from @react-native-community/slider

Logo

NativewindUI

DiscordGitHub
© Ronin Technologies LLC 2025