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>
</>
);
}
npx nwui-cli@latest add slider
npx expo install @react-native-community/slider
import { Slider } from '~/components/nativewindui/Slider';
<Slider value={0.5} />
Inherits props from @react-native-community/slider