Park UI Logo
GitHub
Components
Slider

Slider

A control element that allows for a range of selections.

Usage

import { Slider, type SliderProps } from '~/components/ui'

export const Demo = (props: SliderProps) => {
  return (
    <Slider
      value={[33]}
      marks={[
        { value: 25, label: '25' },
        { value: 50, label: '50' },
        { value: 75, label: '75' },
      ]}
      {...props}
    />
  )
}

Examples

Range Slider

To use the slider as a range slider, you need to provide an array of values.

<Slider value={[33, 66]}>Label</Slider>

Unlabeled

The slider can also be used without a label while still showing indicators within the track.

<Slider defaultValue={[33]} marks={[{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }]} />

Installation

npx @park-ui/cli components add slider