Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Slider } from '@marmoui/ui';Examples
Basic Slider
Default
Simple value slider
<Slider defaultValue={[50]} max={100} step={1} />With Label and Value
Labeled Slider
Slider showing the current value
75
<Slider defaultValue={[75]} max={100} step={1} label="Volume" showValue />Sizes
Slider Sizes
Available in small, medium, and large
<div className="flex flex-col gap-6">
<Slider defaultValue={[30]} max={100} size="sm" label="Small" />
<Slider defaultValue={[50]} max={100} size="md" label="Medium" />
<Slider defaultValue={[70]} max={100} size="lg" label="Large" />
</div>Best Practices
✓
Show the current value
Display the numeric value near the slider so users know the exact selection.
✓
Define meaningful bounds
Set min and max to logical limits. Don't use 0-100 if the range is 50-200.
✗
Don't use for precise entry
If users need to type exact numbers, provide a NumberInput alongside or instead.
✗
Don't use very small step values
Steps too small (e.g., 0.001) make the slider hard to control.
Props
Props
Accessibility
- Keyboard controlled with Arrow keys (Left/Right for horizontal, Up/Down for vertical).
- Home/End keys jump to min/max values.
- Uses
role="slider"witharia-valuemin,aria-valuemax,aria-valuenow. - Label is associated via
aria-labeloraria-labelledby.