Imagine ArtImagine Art

A draggable range control for selecting a numeric value within a defined range.

Forms

Import

import { Slider } from "@/components/ui"

API

PropTypeDefaultDescription
valuenumberControlled current value.
onValueChange(value: number) => voidCallback when value changes.
minnumber0Minimum value.
maxnumber100Maximum value.
size"sm" | "md" | "lg""md"Track and thumb size.
labelstringLabel text above the slider.
showValuebooleanDisplays the current value.

Examples