Slider
An input that lets users select a value from a continuous range by dragging a thumb along a track.
Default
A basic slider for selecting a value from a range. Drag the thumb or use arrow keys to adjust.
<Slider defaultValue={50} />Installation
import { Slider } from "madagent";With Label
Adding a label prop renders a visible label above the slider, properly associated for accessibility.
<Slider defaultValue={50} label="Brightness" />With Value Display
Set showValue to true to display the current numeric value alongside the label. It updates in real time as the slider moves.
<Slider defaultValue={75} label="Opacity" showValue />With Min / Max Labels
Set showMinMax to true to display the minimum and maximum values below the track.
<Slider
defaultValue={40}
label="Temperature"
showValue
showMinMax
min={0}
max={100}
/>With Marks
Pass an array of marks to render labeled tick marks along the track.
<Slider
defaultValue={50}
label="Quality"
marks={[
{ value: 0, label: "Low" },
{ value: 25, label: "Med" },
{ value: 50, label: "High" },
{ value: 75, label: "Very High" },
{ value: 100, label: "Ultra" },
]}
/>Range
Set range to true for a dual-thumb slider that lets users select a start and end value. Values float beneath each thumb as they move.
<Slider
range
defaultValue={[200, 800]}
min={0}
max={1000}
step={50}
label="Price Range"
showValue
/>Disabled
A disabled slider cannot be interacted with and uses disabled tokens for reduced visual prominence.
<Slider defaultValue={30} label="Disabled Slider" disabled />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Controlled value |
defaultValue | number | - | Uncontrolled initial value (defaults to min) |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment |
range | boolean | false | Enables dual-thumb range selection. Value becomes [number, number] |
label | string | - | Visible label text above the slider |
showValue | boolean | false | Shows the current numeric value next to the label |
showMinMax | boolean | false | Shows min/max labels below the track ends |
disabled | boolean | false | Disables the slider |
onChange | (value: number) => void | - | Called when the value changes |
marks | Array<{ value: number; label?: string }> | - | Tick marks on the track |
className | string | - | Additional CSS class for the wrapper |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
<div style={{ display: "flex", flexDirection: "column", gap: 40, maxWidth: 360, margin: "0 auto" }}>
<Slider
range
defaultValue={[200, 800]}
min={0}
max={1000}
step={50}
label="نطاق السعر"
showValue
/>
<Slider
defaultValue={40}
label="السطوع"
showValue
showMinMax
min={0}
max={100}
/>
</div>