Slider

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

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';

import { Slider } from '~/components/nativewindui/Slider';
import { useColorScheme } from '~/lib/useColorScheme';

export default function SliderScreen() {
  const { colors } = useColorScheme();
  const [sliderValue, setSliderValue] = React.useState(0.5);
  return (
    <>
      <Stack.Screen
        options={{
          title: 'NativeWindUI',
          headerSearchBarOptions: {
            hideWhenScrolling: false,
          },
          headerLargeTitle: true,
          headerRight() {
            return (
              <Pressable className="opacity-80 active:opacity-40">
                <View className="opacity-90">
                  <Icon name="cog-outline" color={colors.foreground} />
                </View>
              </Pressable>
            );
          },
        }}
      />
      <ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
        <View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
          <Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
            Slider
          </Text>

          <Slider value={sliderValue} onValueChange={setSliderValue} />
        </View>
      </ScrollView>
    </>
  );
}

Installation

Run the following command:

npx nwui-cli@latest add slider

🚀

Ship.

Add the following dependencies to your project:

npx expo install @react-native-community/slider

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

~/components/nativewindui/Slider.tsx

Download

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.ComponentPropsWithoutRef<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
      }
      {...props}
    />
  );
}

export { Slider };

🛸

Ship.

Usage

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

<Slider value={0.5} />

Props

Inherits props from @react-native-community/slider