tune

Slider

Range input for numeric values.

Slider Examples

Range slider built on the native <input type="range" />. Currently uncontrolled (initialValue uses defaultValue).

Basic usage

Provide the required range props and an optional label.

Live preview

import Slider from "@/packages/ui/src/_components/slider/Slider";

export default function Example() {
  return (
    <Slider
      label="Volume"
      minValue={0}
      maxValue={100}
      initialValue={30}
    />
  );
}

Variant, size, and icon

Use size for density (small/medium/large), variant for semantic tone, and iconName for a leading icon in the label.

Live preview

import Slider from "@/_components/slider/Slider";

export default function Example() {
  return (
    <>
      <Slider
        label="Brightness (small)"
        iconName="light_mode"
        variant="warning"
        size="small"
        minValue={0}
        maxValue={10}
        initialValue={5}
      />

      <Slider
        label="Opacity (medium)"
        iconName="opacity"
        variant="info"
        size="medium"
        minValue={0}
        maxValue={100}
        initialValue={40}
      />

      <Slider
        label="Zoom (large)"
        iconName="zoom_in"
        variant="success"
        size="large"
        minValue={50}
        maxValue={200}
        initialValue={100}
      />
    </>
  );
}

Disabled and vertical

disabled toggles the native input state. vertical is CSS-driven (visual/behavior depends on styles).

Live preview

Vertical (CSS-driven)

Vertical + disabled

import Slider from "@/_components/slider/Slider";

export default function Example() {
  return (
    <>
      <Slider
        label="Temperature (disabled)"
        minValue={-10}
        maxValue={50}
        initialValue={20}
        disabled
      />

      <Slider
        label="Vertical slider"
        minValue={0}
        maxValue={100}
        initialValue={60}
        vertical
      />
    </>
  );
}

Uncontrolled patterns

Because Slider is uncontrolled, you can reset it by re-mounting with a changing key.

• If you need a controlled slider (value/onChange), you may want to extend the component to forward value/onChange.

Live preview

import { useState } from "react";
import Slider from "@/_components/slider/Slider";
import { Button } from "@/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [seed, setSeed] = useState(1);

  return (
    <>
      <Button variant="secondary" onClick={() => setSeed((v) => v + 1)}>
        Reset (re-mount)
      </Button>

      <Slider
        key={seed}
        label="Resettable slider"
        minValue={0}
        maxValue={100}
        initialValue={70}
      />
    </>
  );
}

Range examples

Different min/max scales can help validate visuals across edge cases.

Live preview

import Slider from "@/_components/slider/Slider";

export default function Example() {
  return (
    <>
      <Slider label="Small range (0 → 10)" minValue={0} maxValue={10} initialValue={3} />
      <Slider label="Centered range (-50 → 50)" minValue={-50} maxValue={50} initialValue={0} />
      <Slider label="Large range (0 → 1,000)" minValue={0} maxValue={1000} initialValue={250} />
    </>
  );
}

On this page

Slider Props

Slider — Props
Prop	Type	Required	Default	Description
minValue	number	Yes	—	Minimum value for the range input (min).
maxValue	number	Yes	—	Maximum value for the range input (max).
initialValue	number	Yes	—	Initial value for the range input (defaultValue). Note: this component is currently uncontrolled.
size	"small" \| "medium" \| "large"	No	"small"	Size modifier (cssnt-slider--sm/md/lg). Also forwarded to Icon as size.
variant	"primary" \| "secondary" \| "tertiary" \| "success" \| "warning" \| "danger" \| "info"	No	"primary"	Visual/semantic variant (cssnt-slider--*).
iconName	string	No	undefined	If provided, renders a leading Icon inside the label area (uses Material Symbols name).
label	string	No	undefined	Label text. Also used as aria-label and as the input id. Prefer unique, ID-safe labels to avoid collisions.
disabled	boolean	No	false	Disables the input and adds cssnt-slider--disabled.
vertical	boolean	No	false	Adds cssnt-slider--vertical. Visual/behavior is CSS-driven and may vary by implementation.