Slider

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

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

💡

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

Usage

<Slider defaultValue={[50]}  />

<Slider defaultValue={[50]}  />

Tooltip

IsDisabled

Slider sizes

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

<div className="inline-flex flex-col space-y-2">
  <Slider size="sm" defaultValue={[50]} />
  <Slider size="md" defaultValue={[50]} />
  <Slider size="lg" defaultValue={[50]} />
  <Slider size="xl" defaultValue={[50]} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Slider size="sm" defaultValue={[50]} />
  <Slider size="md" defaultValue={[50]} />
  <Slider size="lg" defaultValue={[50]} />
  <Slider size="xl" defaultValue={[50]} />
</div>

Slider KnobIcon

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

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[50]} knobIcon={SliderDefaultKnobIcon} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[50]} knobIcon={SliderDefaultKnobIcon} />
</div>

Slider states

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

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} />
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} step={10} />
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} step={10} isDisabled={true} />
  <Slider size="md" defaultValue={[50]} formatOptions={{
      style: "unit",
      unit: "celsius",
      unitDisplay: "narrow",
    }} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} />
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} step={10} />
  <Slider size="md" defaultValue={[50]} minValue={20} maxValue={80} step={10} isDisabled={true} />
  <Slider size="md" defaultValue={[50]} formatOptions={{
      style: "unit",
      unit: "celsius",
      unitDisplay: "narrow",
    }} />
</div>

Range Slider

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

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[33, 66]} range />
</div>

<div className="inline-flex flex-col space-y-2">
  <Slider size="md" defaultValue={[33, 66]} range />
</div>

API Reference

Prop	Type	Default
`size`	`union`	`md`
`isDisabled`	`boolean`	`false`
`tooltip`	`boolean`	`true`
`range`	`boolean`	`false`
`knobIcon`	`React.ReactNode`	-

Last updated on July 18, 2022

Slider

Imports#

Usage#

Slider sizes#

Slider KnobIcon#

Slider states#

Range Slider#

API Reference#

Imports