Slider

A Slider component allows users to select a value from a range by dragging a thumb along a track. Built on top of heroui-native Slider.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Slider running in the Nayan UI example app

Usage

Source
Slider.tsx
import { View } from 'react-native';
import { NSlider, NText } from '@nayan-ui/native';


export default function SliderScreen() {
  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic</NText>
      <NSlider defaultValue={50} />


      <NText className="text-lg font-bold">With output label</NText>
      <NSlider defaultValue={30} showOutput />


      <NText className="text-lg font-bold">Custom range (0–200)</NText>
      <NSlider defaultValue={100} minValue={0} maxValue={200} showOutput />


      <NText className="text-lg font-bold">Step = 10</NText>
      <NSlider defaultValue={50} step={10} showOutput />


      <NText className="text-lg font-bold">Disabled</NText>
      <NSlider defaultValue={40} isDisabled />
    </View>
  );
}

Attributes

12 props
NameTypeDefaultDetails
valuenumberOptionalControlled slider value.
defaultValuenumberOptionalDefault slider value.
onChange(value: number) => voidOptionalCallback when slider value changes.
minValuenumber0Minimum value of the slider.
maxValuenumber100Maximum value of the slider.
stepnumber1Step increment of the slider.
isDisabledbooleanfalseWhether the slider is disabled.
showOutputbooleanfalseWhether to show the current value output.
classNamestring' 'You can customise by passing tailwind classes.
trackClassNamestring' 'You can customise track by passing tailwind classes.
fillClassNamestring' 'You can customise fill by passing tailwind classes.
thumbClassNamestring' 'You can customise thumb by passing tailwind classes.

Tags

Other components solving nearby problems.