Density

Slider

Slider composes Base UI’s slider primitives with Density size attributes on the root and component-local styling for the track, active range, thumb, and value.

import { useState } from "react";
import { Slider } from "density-base-ui";

export default function SliderExample() {
  const [zoom, setZoom] = useState(65);
  const updateZoom = (value: number | readonly number[]) => {
    setZoom(Array.isArray(value) ? value[0] : value);
  };
  return <Slider value={zoom} onValueChange={updateZoom} aria-label="Zoom" />;
}

Props

Prop Attribute Values Default
label None React node None
hint None React node None
fieldOrientation None vertical, horizontal vertical
showValue None true, false false
valueLabel None React node None
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Label and hint

Changes preview scale.
import { Slider } from "density-base-ui";
export default function SliderFieldExample() {
  return <Slider label="Zoom" hint="Changes preview scale." value={65} />;
}

Field orientation

import { Slider } from "density-base-ui";
export default function SliderFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <Slider fieldOrientation="vertical" label="Vertical" value={40} />
      <Slider fieldOrientation="horizontal" label="Horizontal" value={60} />
    </div>
  );
}

Show value

60
import { Slider } from "density-base-ui";
export default function SliderShowValueExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <Slider aria-label="Hidden value" showValue={false} value={40} />
      <Slider aria-label="Visible value" showValue value={60} />
    </div>
  );
}

Value label

72%
import { Slider } from "density-base-ui";
export default function SliderValueLabelExample() {
  return <Slider aria-label="Opacity" showValue value={72} valueLabel="72%" />;
}

Size

import { Slider } from "density-base-ui";
export default function SliderSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <Slider aria-label="2xs" size="2xs" value={50} />
      <Slider aria-label="xs" size="xs" value={50} />
      <Slider aria-label="sm" size="sm" value={50} />
      <Slider aria-label="md" size="md" value={50} />
      <Slider aria-label="lg" size="lg" value={50} />
      <Slider aria-label="xl" size="xl" value={50} />
      <Slider aria-label="2xl" size="2xl" value={50} />
      <Slider aria-label="3xl" size="3xl" value={50} />
    </div>
  );
}