Slider
A slider is a UI element that lets users select a single value or a range of values along a bar.
useSlider API
Import
import { useSlider } from '@mui/base/useSlider';
// or
import { useSlider } from '@mui/base';If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
Type:boolean
Default:false
If true the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
Type:boolean
Default:false
Marks indicate predetermined values to which the user can move the slider. If true the marks are spaced according the value of the step prop. If an array, it should contain objects with value and an optional label keys.
Type:boolean | Mark[]
Default:false
Callback function that is fired when the slider's value changed.
Type:(event: Event, value: number | number[], activeThumb: number) => void
Callback function that is fired when the mouseup is triggered.
Type:(event: React.SyntheticEvent | Event, value: number | number[]) => void
A transformation function, to change the scale of the slider.
Type:(value: number) => number
Default:function Identity(x) {
return x;
}
The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is null, the thumb can only be slid onto marks provided with the marks prop.
Type:number | null
Default:1
Returns the offset and leap methods to calculate the positioning styles based on the slider axis.
Type:{ [key in Axis]: AxisProps<key> }
Resolver for the hidden input slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>
Resolver for the root slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>
Resolver for the thumb slot's props.
Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>
The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
Type:Mark[]