Slider

Select one or more values within a range, built on React Aria's Slider.

import { Slider } from "@pockets-ui/components"

Basic

Volume30

Code

import { Slider } from "@pockets-ui/components"

export default function SliderBasic() {
  return <Slider label="Volume" defaultValue={30} />
}

Range

Pass an array to defaultValue and the slider grows a second thumb. Give each one a name via thumbLabels so screen reader users can tell them apart.

Price range$20.00 – $80.00

Code

import { Slider } from "@pockets-ui/components"

export default function SliderRange() {
  return (
    <Slider
      label="Price range"
      defaultValue={[20, 80]}
      thumbLabels={["Minimum", "Maximum"]}
      formatOptions={{ style: "currency", currency: "USD" }}
    />
  )
}

Step and bounds

step constrains which values are reachable. Pair it with formatOptions so the displayed value reads in the domain's own units rather than a raw number.

Opacity40%

Code

import { Slider } from "@pockets-ui/components"

export default function SliderStepAndBounds() {
  return (
    <Slider
      label="Opacity"
      defaultValue={0.4}
      minValue={0}
      maxValue={1}
      step={0.05}
      formatOptions={{ style: "percent" }}
    />
  )
}

Vertical

Code

import { Slider } from "@pockets-ui/components"

export default function SliderVertical() {
  return <Slider aria-label="Volume" orientation="vertical" defaultValue={65} />
}

Disabled

Volume30

Code

import { Slider } from "@pockets-ui/components"

export default function SliderDisabled() {
  return <Slider label="Volume" defaultValue={30} isDisabled />
}