Skip to content
Docs
Components
Forms
Slider

Slider

The Slider is used to allow users to make selections from a range of values.

Imports

import {
  Slider,
  SliderFilledTrack,
  useSliderProps,
  useSliderState,
  SliderThumb,
  SliderThumbContainer,
  SliderThumbInput,
  useSliderThumbProps,
  useSliderThumbState,
  SliderThumbWrapper,
  SliderTrack,
  SliderTrackWrapper,
  SliderWrapper,
} from "@adaptui/react-tailwind";
💡

A complex component that supports customization as per the composition guide.

Usage

Slider sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg & xl.

Slider KnobIcon

The knob icon can be customized by passing a custom icon for the SliderThumb.

Slider states

Slider can have min and max values, step, isDisabled & formatOptions as well.

Range Slider

Single Slider can be converted to a range slider using range prop.

API Reference

Prop

Type

Default

sizeunionmd
isDisabledbooleanfalse
tooltipbooleantrue
rangebooleanfalse
knobIconReact.ReactNode-
Last updated on June 8, 2023