Slider

Use Slider

Slider is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Slider } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Slider label="Price range" name="price" defaultValue={[25, 75]} min={0} max={100} />
    </FloodRoot>
  );
}

Design notes

• value/defaultValue contain one number or an ordered pair. onValueChange returns a new array. Values snap to min-based steps and thumbs cannot cross; Tab order stays stable. Supply thumbLabels to translate or explain each handle.
• Horizontal only. Direction follows the host, including RTL. Native range inputs retain keyboard behavior; pointer selection chooses the nearest handle. Names submit one or two entries; uncontrolled reset restores defaults.
• hideLabel preserves the accessible legend; showValue only controls the visible numeric readout. Read-only prevents edits while keeping focus. Use hint/message/error for meaning beyond color. Touch assistive technology needs device testing. Available in 0.2.5.

API reference