Range

A styled native range slider for selecting a value from a range.

Default

tsx

import { Range } from "@hummingbirdui/react";

export default function RangeDefault() {
  return <Range defaultValue={50} className="max-w-sm" />;
}

Sizes

The size prop offers three sizes: sm, md (default), and lg.

tsx

import { Range } from "@hummingbirdui/react";

export default function RangeSizes() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Range size="sm" defaultValue={50} />
      <Range size="md" defaultValue={50} />
      <Range size="lg" defaultValue={50} />
    </div>
  );
}

Colors

The color prop offers primary (default), secondary, info, success, warning, danger, and neutral.

tsx

import { Range } from "@hummingbirdui/react";

export default function RangeColors() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <Range color="primary" defaultValue={50} />
      <Range color="secondary" defaultValue={50} />
      <Range color="info" defaultValue={50} />
      <Range color="success" defaultValue={50} />
      <Range color="warning" defaultValue={50} />
      <Range color="danger" defaultValue={50} />
      <Range color="neutral" defaultValue={50} />
    </div>
  );
}

Disabled

tsx

import { Range } from "@hummingbirdui/react";

export default function RangeDisabled() {
  return <Range defaultValue={50} disabled className="max-w-sm" />;
}

API Reference

Range

Prop	Type	Default
`color`	`"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"primary"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`className`	`string`	—

Styling

Hummingbird React form range is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available form range classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousFloating Label NextSlider