slider

Accessibility Props

• aria-label: string

  • The label of the slider.

• aria-labelledby: string

  • The id of the element containing a label for the slider.

• aria-valuetext: string

  • A string value that provides a user-friendly name for the current value of the slider.

Styling Props

• classes: object

  • Override or extend the styles applied to the component.
  • See CSS classes API for more details.

• color: ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string = ‘primary’

  • The color of the component.
  • Supports default and custom theme colors.

Component Customization

• components: object

  {
    Input?: elementType,
    Mark?: elementType,
    MarkLabel?: elementType,
    Rail?: elementType,
    Root?: elementType,
    Thumb?: elementType,
    Track?: elementType,
    ValueLabel?: elementType
  }
  

  • The components used for each slot inside.

• componentsProps: object

  • Extra props for the slot components.

Value Props

• defaultValue: Array | number

  • The default value when the component is not controlled.

• value: Array | number

  • The value of the slider.

Behavior Props

• disabled: boolean = false

  • If true, the component is disabled.

• disableSwap: boolean = false

  • If true, the active thumb doesn’t swap when moving pointer over another thumb.

• marks: Array<{ label?: node, value: number }> | boolean = false

  • Marks indicating predetermined values.

• max: number = 100

  • Maximum allowed value.

• min: number = 0

  • Minimum allowed value.

• orientation: ‘horizontal’ | ‘vertical’ = ‘horizontal’

  • The component orientation.

• step: number = 1

  • Granularity of slider steps.

Callback Props

• onChange: function

  • Fired when slider value changes.

• onChangeCommitted: function

  • Fired when mouseup is triggered.

Advanced Props

• getAriaLabel: function

  • Returns a user-friendly name for thumb labels.

• getAriaValueText: function

  • Returns a user-friendly name for the current value.

• scale: function = Identity

  • Transformation function to change the slider scale.

• valueLabelDisplay: ‘auto’ | ‘off’ | ‘on’ = ‘off’

  • Controls value label display.

• valueLabelFormat: function | string

  • Format function for the value label.