Custom Material-UI Slider component with advanced label and mark management.
Wraps Material-UI's Slider with intelligent mark limiting (max 30 visible marks)
and overlap detection for labels. Handles both single and range values, controlled
and uncontrolled modes. Includes keyboard focus workaround for arrow key interactions.
Accepts standard ARIA attributes and forwards them to the underlying MUI slider.
MUI uses getAriaLabel(index) instead of aria-label when both are supplied. A valid
aria-labelledby reference takes precedence over either in accessible-name computation.
Prefer one naming strategy: aria-label or aria-labelledby for a single thumb, and
getAriaLabel for distinct range-thumb names. Input slot props can override these attributes.
Parameters
props: SliderProps
Slider configuration (see SliderProps)
Returns any
Slider component with optimized mark/label rendering
Example
// Basic range slider <Slidermin={0}max={100}value={[30, 70]}onChange={handleChange}/>
// With marks and labels <Slider min={0} max={100} marks={[{ value:0, label:'0' }, { value:100, label:'100' }]} valueLabelDisplay="on" />
Custom Material-UI Slider component with advanced label and mark management.
Wraps Material-UI's Slider with intelligent mark limiting (max 30 visible marks) and overlap detection for labels. Handles both single and range values, controlled and uncontrolled modes. Includes keyboard focus workaround for arrow key interactions. Accepts standard ARIA attributes and forwards them to the underlying MUI slider.
MUI uses getAriaLabel(index) instead of aria-label when both are supplied. A valid aria-labelledby reference takes precedence over either in accessible-name computation. Prefer one naming strategy: aria-label or aria-labelledby for a single thumb, and getAriaLabel for distinct range-thumb names. Input slot props can override these attributes.