Density

Slider

Slider composes Base UI’s slider primitives with Density size attributes on the root.

Zoom
65
import { Slider } from "density-base-ui";

export default function SliderExample() {
  return (
    <Slider.Root defaultValue={65} aria-label="Zoom" style={{ width: 240 }}>
      <Slider.Label>Zoom</Slider.Label>
      <Slider.Value />
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
}

Props

Prop Attribute Values Default
Slider.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Other Slider parts Mixed Base UI slider props None