Slider component props
| Name | Type | Description |
|---|---|---|
| color | MantineColor | Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default |
| defaultValue | number | Uncontrolled component default value |
| disabled | boolean | Disables slider |
| hiddenInputProps | React.ComponentPropsWithoutRef<"input"> | Props passed down to the hidden input |
| inverted | boolean | Determines whether track value representation should be inverted, false by default |
| label | ReactNode | ((value: number) => ReactNode) | Function to generate label or any react node to render instead, set to null to disable label |
| labelAlwaysOn | boolean | Determines whether the label should be visible when the slider is not being dragged or hovered, false by default |
| labelTransitionProps | TransitionProps | Props passed down to the Transition component, { transition: 'fade', duration: 0 } by default |
| marks | { value: number; label?: ReactNode; }[] | Marks displayed on the track |
| max | number | Maximum possible value, 100 by default |
| min | number | Minimal possible value, 0 by default |
| name | string | Hidden input name, use with uncontrolled component |
| onChange | ((value: number) => void) | Called when value changes |
| onChangeEnd | ((value: number) => void) | Called when user stops dragging slider or changes value with arrows |
| precision | number | Number of significant digits after the decimal point |
| radius | MantineRadius | number | Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 'xl' by default |
| restrictToMarks | boolean | Determines whether the selection should be only allowed from the given marks array, false by default |
| scale | ((value: number) => number) | A transformation function to change the scale of the slider |
| showLabelOnHover | boolean | Determines whether the label should be displayed when the slider is hovered, true by default |
| size | number | MantineSize | (string & {}) | Controls size of the track, 'md' by default |
| step | number | Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default |
| thumbChildren | React.ReactNode | Content rendered inside thumb |
| thumbLabel | string | Thumb aria-label |
| thumbProps | React.ComponentPropsWithoutRef<"div"> | Props passed down to thumb element |
| thumbSize | string | number | Thumb width and height, by default value is computed based on size prop |
| value | number | Controlled component value |
RangeSlider component props
| Name | Type | Description |
|---|---|---|
| color | MantineColor | Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default |
| defaultValue | RangeSliderValue | Uncontrolled component default value |
| disabled | boolean | Disables slider |
| hiddenInputProps | React.ComponentPropsWithoutRef<"input"> | Props passed down to the hidden input |
| inverted | boolean | Determines whether track values representation should be inverted, false by default |
| label | ReactNode | ((value: number) => ReactNode) | Function to generate label or any react node to render instead, set to null to disable label |
| labelAlwaysOn | boolean | Determines whether the label should be visible when the slider is not being dragged or hovered, false by default |
| labelTransitionProps | TransitionProps | Props passed down to the Transition component, { transition: 'fade', duration: 0 } by default |
| marks | { value: number; label?: ReactNode; }[] | Marks displayed on the track |
| max | number | Maximum possible value, 100 by default |
| maxRange | number | Maximum range interval, Infinity by default |
| min | number | Minimal possible value, 0 by default |
| minRange | number | Minimal range interval, 10 by default |
| name | string | Hidden input name, use with uncontrolled component |
| onChange | ((value: RangeSliderValue) => void) | Called when value changes |
| onChangeEnd | ((value: RangeSliderValue) => void) | Called when user stops dragging slider or changes value with arrows |
| precision | number | Number of significant digits after the decimal point |
| radius | MantineRadius | number | Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 'xl' by default |
| restrictToMarks | boolean | Determines whether the selection should be only allowed from the given marks array, false by default |
| scale | ((value: number) => number) | A transformation function to change the scale of the slider |
| showLabelOnHover | boolean | Determines whether the label should be displayed when the slider is hovered, true by default |
| size | number | MantineSize | (string & {}) | Controls size of the track, 'md' by default |
| step | number | Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default |
| thumbChildren | React.ReactNode | Content rendered inside thumb |
| thumbFromLabel | string | First thumb aria-label |
| thumbProps | ((index: 0 | 1) => Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">) | Props passed down to thumb element based on the thumb index |
| thumbSize | string | number | Thumb width and height, by default value is computed based on size prop |
| thumbToLabel | string | Second thumb aria-label |
| value | RangeSliderValue | Controlled component value |