Slider

A component for selecting a value from a specified range.

Last updated 8/26/2026

Size

Two sizes: Medium and Large.

Medium: ValueValue
Large: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Medium</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
      <Dt>Large</Dt>
      <Dd>
        <Slider
          size="large"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
    </Dl>
  );
}

Markers

Markers can be displayed at arbitrary values with the markerValues props. Set the showMarkers props to false to hide markers.

With Markers: ValueValue
Without Markers: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function MarkerSample() {
  return (
    <Dl>
      <Dt>With Markers</Dt>
      <Dd>
        <Slider
          size="large"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          markerValues={[0, 25, 50, 75, 100]}
        />
      </Dd>
      <Dt>Without Markers</Dt>
      <Dd>
        <Slider
          size="medium"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          showMarkers={false}
        />
      </Dd>
    </Dl>
  );
}

States

Use the disabled props to make the slider non-interactive.

Enabled: ValueValue
Disabled: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          disabled
        />
      </Dd>
    </Dl>
  );
}