Slider

Select one or more values within a range.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
37
Slider example
import { Slider } from "@/shim-ui/slider";

export default () => <Slider defaultValue={37} label="Slope" />;

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add slider

Controlled value

Control the slider value with value and onChange to keep it in sync with application state.

73

Value: 73

Controlled value example
"use client";
import { useState } from "react";
import { Slider } from "@/shim-ui/slider";

export default () => {
  const [value, setValue] = useState<number | number[]>(73);

  return (
    <>
      <Slider label="Slope" onChange={setValue} value={value} />
      <p>Value: {value}</p>
    </>
  );
};

Controlled range

Provide an array to value for a range slider with two thumbs.

17–73

Range: 17–73

Controlled range example
"use client";
import { useState } from "react";
import { Slider } from "@/shim-ui/slider";

export default () => {
  const [range, setRange] = useState<number | number[]>([17, 73]);

  return (
    <>
      <Slider label="Range" onChange={setRange} value={range} />
      <p className="tabular-nums">
        Range: {Array.isArray(range) ? `${range[0]}–${range[1]}` : range}
      </p>
    </>
  );
};

Label position

Set labelPosition to move the label above or beside the track.

37
37
Label position example
import { Slider } from "@/shim-ui/slider";

export default () => (
  <>
    <Slider defaultValue={37} label="Slope" labelPosition="top" />
    <Slider defaultValue={37} label="Slope" labelPosition="side" />
  </>
);

Filled track

Use the isFilled prop to fill the region between the start and the current value.

37
17–73
Filled track example
import { Slider } from "@/shim-ui/slider";

export default () => (
  <>
    <Slider defaultValue={37} isFilled label="Slope" />
    <Slider defaultValue={[17, 73]} isFilled label="Slope" />
  </>
);

Variant

Select a variant to align the slider with the current surface.

Variant example
import { Slider } from "@/shim-ui/slider";

export default () => (
  <>
    <Slider aria-label="Slope" defaultValue={37} isFilled variant="classic" />
    <Slider aria-label="Slope" defaultValue={37} isFilled variant="soft" />
    <Slider aria-label="Slope" defaultValue={37} isFilled variant="outline" />
  </>
);

Size

Adjust the size prop to change thumb and track dimensions.

37
37
37
37
Size example
import { Slider } from "@/shim-ui/slider";

export default () => (
  <>
    <Slider defaultValue={37} isFilled label="Slope" size={1} />
    <Slider defaultValue={37} isFilled label="Slope" size={2} />
    <Slider defaultValue={37} isFilled label="Slope" size={3} />
    <Slider defaultValue={37} isFilled label="Slope" size={4} />
  </>
);

Orientation

Toggle orientation to render the slider horizontally or vertically.

Orientation example
"use client";
import { Fragment } from "react";
import { Slider } from "@/shim-ui/slider";

export default () => (
  <>
    {([1, 2, 3, 4] as const).map((size) => (
      <Fragment key={size}>
        <Slider
          aria-label="Slope"
          defaultValue={37}
          isFilled
          orientation="vertical"
          size={size}
        />
        <Slider
          aria-label="Slope"
          defaultValue={[17, 73]}
          isFilled
          orientation="vertical"
          size={size}
        />
      </Fragment>
    ))}
  </>
);