Slider - Kumo

Price range

import { Slider } from "@cloudflare/kumo";

export function SliderRangeDemo() {
  return (
    <Slider
      label="Price range"
      defaultValue={[25, 75]}
      getAriaLabel={(index) =>
        index === 0 ? "Minimum price" : "Maximum price"
      }
      className="w-72"
    />
  );
}

Installation

Barrel

import { Slider } from "@cloudflare/kumo";

Granular

import { Slider } from "@cloudflare/kumo/components/slider";

Usage

import { Slider } from "@cloudflare/kumo";

export default function Example() {
  return <Slider label="Volume" defaultValue={40} />;
}

Slider is built on Base UI’s Slider. Props such as value, defaultValue, min, max, step, format, and onValueChange are passed through to it.

Examples

Basic Slider

A single thumb, with the value in a badge below it and the minimum and maximum at either end.

Volume

import { Slider } from "@cloudflare/kumo";

export function SliderBasicDemo() {
  return <Slider label="Volume" defaultValue={40} className="w-72" />;
}

Range

Pass an array to value or defaultValue to render one thumb per value. Use getAriaLabel to give each thumb its own accessible name.

Price range

import { Slider } from "@cloudflare/kumo";

export function SliderRangeDemo() {
  return (
    <Slider
      label="Price range"
      defaultValue={[25, 75]}
      getAriaLabel={(index) =>
        index === 0 ? "Minimum price" : "Maximum price"
      }
      className="w-72"
    />
  );
}

Custom Range and Step

Set min, max, and step to constrain the values.

Match count

import { Slider } from "@cloudflare/kumo";

export function SliderStepDemo() {
  return (
    <Slider label="Match count" defaultValue={2} max={5} className="w-72" />
  );
}

Formatted Values

format takes Intl.NumberFormat options and applies to the badges, the range labels, and the value announced to assistive technology.

Sampling rate

import { Slider } from "@cloudflare/kumo";

export function SliderFormatDemo() {
  return (
    <Slider
      label="Sampling rate"
      defaultValue={0.25}
      min={0}
      max={1}
      step={0.05}
      format={{ style: "percent" }}
      className="w-72"
    />
  );
}

Sizes

Use size="sm" for dense layouts.

Small

Base

import { Slider } from "@cloudflare/kumo";

export function SliderSizesDemo() {
  return (
    <div className="flex w-72 flex-col gap-6">
      <Slider label="Small" size="sm" defaultValue={30} />
      <Slider label="Base" defaultValue={30} />
    </div>
  );
}

Controlled

Pass value and onValueChange to control the slider.

Brightness

Brightness: 50%

import { useState } from "react";
import { Slider } from "@cloudflare/kumo";

export function SliderControlledDemo() {
  const [value, setValue] = useState(50);

  return (
    <div className="flex w-72 flex-col gap-3">
      <Slider
        label="Brightness"
        value={value}
        onValueChange={(next) => setValue(next)}
      />
      <p className="text-sm text-kumo-subtle">Brightness: {value}%</p>
    </div>
  );
}

Disabled

Locked

import { Slider } from "@cloudflare/kumo";

export function SliderDisabledDemo() {
  return <Slider label="Locked" defaultValue={70} disabled className="w-72" />;
}

Accessibility

Each thumb is a native range input, so arrow keys, Page Up/Page Down, and Home/End work by default.
label names the slider and its thumb. Without a visible label, pass getAriaLabel.
The value badges and range labels are hidden from assistive technology, because each thumb already announces its formatted value.

API Reference

Prop	Type	Default	Description
size	`"sm" \| "base"`	`"base"`	-
label	`ReactNode`	-	Label displayed above the slider track.
getAriaLabel	`(index: number) => string`	-	Accessible name for each thumb. Use it when there is no visible `label`, or to tell the thumbs of a range slider apart.
value	`number \| readonly number[]`	-	Controlled value. Pass an array to render one thumb per value (a range).
defaultValue	`number \| readonly number[]`	-	Uncontrolled initial value. Pass an array to render one thumb per value (a range).
onValueChange	`(value: number \| readonly number[], eventDetails: SliderRoot.ChangeEventDetails) => void`	-	Called when the value changes while dragging or from the keyboard
min	`number`	-	Minimum value of the slider (default: 0)
max	`number`	-	Maximum value of the slider (default: 100)
step	`number`	-	Amount the value changes per step (default: 1)
format	`Intl.NumberFormatOptions`	-	Formats the value badges, range labels, and the value announced to assistive technology
disabled	`boolean`	-	Whether the slider is disabled