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" />;
}

Label and hint

Changes preview scale.
import { useState } from "react";
import { Slider } from "density-base-ui";
export default function SliderFieldExample() {
  const [zoom, setZoom] = useState(65);
  const updateZoom = (value: number | readonly number[]) => {
    setZoom(Array.isArray(value) ? value[0] : value);
  };

  return (
    <Slider
      label="Zoom"
      hint="Changes preview scale."
      onValueChange={updateZoom}
      value={zoom}
    />
  );
}

Error

Set the zoom between 25% and 75%.
import { useState } from "react";
import { Slider } from "density-base-ui";

export default function SliderErrorExample() {
  const [zoom, setZoom] = useState(90);
  const updateZoom = (value: number | readonly number[]) => {
    setZoom(Array.isArray(value) ? value[0] : value);
  };

  return (
    <Slider
      errorMessage="Set the zoom between 25% and 75%."
      hint="Changes preview scale."
      label="Zoom"
      onValueChange={updateZoom}
      value={zoom}
    />
  );
}

Orientation

Use orientation="vertical" to change the slider axis. Give a vertical slider a height so its rail has room to render.

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

export default function SliderOrientationExample() {
  const [zoom, setZoom] = useState(40);

  const updateZoom = (value: number | readonly number[]) => {
    setZoom(Array.isArray(value) ? value[0] : value);
  };

  return (
    <View
      align="stretch"
      orientation="horizontal"
      padding={false}
      style={{ height: "12rem" }}
    >
      <Slider
        aria-label="Vertical zoom"
        onValueChange={updateZoom}
        orientation="vertical"
        value={zoom}
      />
    </View>
  );
}

Field orientation

fieldOrientation changes the label and control layout without changing the slider axis.

import { useState } from "react";
import { Slider, View } from "density-base-ui";
export default function SliderFieldOrientationExample() {
  const [verticalZoom, setVerticalZoom] = useState(40);
  const [horizontalZoom, setHorizontalZoom] = useState(60);
  const updateVerticalZoom = (value: number | readonly number[]) => {
    setVerticalZoom(Array.isArray(value) ? value[0] : value);
  };
  const updateHorizontalZoom = (value: number | readonly number[]) => {
    setHorizontalZoom(Array.isArray(value) ? value[0] : value);
  };

  return (
    <View>
      <Slider
        fieldOrientation="vertical"
        label="Vertical"
        onValueChange={updateVerticalZoom}
        value={verticalZoom}
      />
      <Slider
        fieldOrientation="horizontal"
        label="Horizontal"
        onValueChange={updateHorizontalZoom}
        value={horizontalZoom}
      />
    </View>
  );
}

Show value

60
import { useState } from "react";
import { Slider, View } from "density-base-ui";
export default function SliderShowValueExample() {
  const [hiddenValue, setHiddenValue] = useState(40);
  const [visibleValue, setVisibleValue] = useState(60);
  const updateHiddenValue = (value: number | readonly number[]) => {
    setHiddenValue(Array.isArray(value) ? value[0] : value);
  };
  const updateVisibleValue = (value: number | readonly number[]) => {
    setVisibleValue(Array.isArray(value) ? value[0] : value);
  };

  return (
    <View>
      <Slider
        aria-label="Hidden value"
        onValueChange={updateHiddenValue}
        showValue={false}
        value={hiddenValue}
      />
      <Slider
        aria-label="Visible value"
        onValueChange={updateVisibleValue}
        showValue
        value={visibleValue}
      />
    </View>
  );
}

Value label

72%
import { useState } from "react";
import { Slider } from "density-base-ui";
export default function SliderValueLabelExample() {
  const [opacity, setOpacity] = useState(72);
  const updateOpacity = (value: number | readonly number[]) => {
    setOpacity(Array.isArray(value) ? value[0] : value);
  };

  return (
    <Slider
      aria-label="Opacity"
      onValueChange={updateOpacity}
      showValue
      value={opacity}
      valueLabel={`${opacity}%`}
    />
  );
}

Size

import { useState, type ComponentProps } from "react";
import { Slider, View } from "density-base-ui";

function SizeSlider({ size }: { size: ComponentProps<typeof Slider>["size"] }) {
  const [value, setValue] = useState(50);
  const updateValue = (nextValue: number | readonly number[]) => {
    setValue(Array.isArray(nextValue) ? nextValue[0] : nextValue);
  };

  return (
    <Slider
      aria-label={size}
      onValueChange={updateValue}
      size={size}
      value={value}
    />
  );
}

export default function SliderSizeExample() {
  return (
    <View>
      <SizeSlider size="2xs" />
      <SizeSlider size="xs" />
      <SizeSlider size="sm" />
      <SizeSlider size="md" />
      <SizeSlider size="lg" />
      <SizeSlider size="xl" />
      <SizeSlider size="2xl" />
      <SizeSlider size="3xl" />
    </View>
  );
}