primitives/@mihcm/ui·v0.21.0·stable
Slider
Range input with single or dual thumbs. Three sizes. Powered by Radix Slider.
Props
The full prop API for Slider. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
defaultValue | number[] | — | Initial value(s). Use two values for a range slider. | 0.5.0 |
value | number[] | — | Controlled value(s). | 0.5.0 |
onValueChange | (value: number[]) => void | — | Value change handler. | 0.5.0 |
min | number | 0 | Minimum value. | 0.5.0 |
max | number | 100 | Maximum value. | 0.5.0 |
step | number | 1 | Step increment. | 0.5.0 |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size of track and thumb. | 0.5.0 |
tone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'segmented' | 'primary' | Active range color. Segmented updates by value threshold only when explicitly passed. | 0.10.1 |
segmented | boolean | false | Use value-based semantic tone thresholds instead of one fixed tone. | 0.10.1 |
showValue | boolean | false | Show the current value label. | 0.10.1 |
valueLabelPosition | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'bottom-center' | Position for the visible value label. | 0.10.1 |
showTrackLabels | boolean | false | Show min/max scale labels around the slider. | 0.10.1 |
trackLabelPosition | 'none' | 'top' | 'bottom' | 'inline' | 'none' | Position for min/max scale labels. | 0.10.1 |
labelGap / labelGroupGap | 'none' | 'xs' | 'sm' | 'md' | 'xs' | Control vertical label-row spacing and left/right value-to-scale label spacing. | 0.10.1 |
rangeClassName | string | — | Extra Tailwind classes on the active range element. | 0.10.1 |
disabled | boolean | — | Disable the slider. | 0.5.0 |
Import
import { Slider } from '@mihcm/ui/Slider';