Form Range

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

Default

tsx

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

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

Sizes

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

tsx

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

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

Colors

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

tsx

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

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

Disabled

tsx

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

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

API Reference

FormRange

PropTypeDefaultDescription
color"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral""primary"Color theme of the slider.
size"sm" | "md" | "lg""md"Size of the slider.
classNamestring—Additional classes merged with the generated classes.

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 LabelNextAccordion