Component · <input type="range">

Slider

A native range input with a filled track.

Install

npx @lazizbekio/mitame add slider

Usage

import { useState } from "react";
import { Slider } from "@/components/mitame/ui/slider";

export default function SliderDemo() {
  const [volume, setVolume] = useState(64);
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <Slider aria-label="Volume" value={volume} onValueChange={setVolume} />
      <span className="w-8 text-right text-sm tabular-nums">{volume}</span>
    </div>
  );
}

Props

Prop	Type	Default	Description
`value / defaultValue`	`number`	—	Controlled or uncontrolled value.
`onValueChange`	`(value: number) => void`	—	Called with the new number.
`min / max / step`	`number`	`0 / 100 / 1`	Range.

Keyboard

Key	Does
`← → ↑ ↓`	Step
`Home / End`	Min / max
`Page Up / Down`	Big step

Styling

Every part has a data-slot starting with slider, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.