Type alias SliderProps

SliderProps: {
    className?: string;
    defaultValue?: number;
    id?: string;
    isDisabled?: boolean;
    max?: number;
    min?: number;
    onChange?: ((event, value, activeThumb) => void);
    onChangeCommitted?: ((event, value) => void);
    orientation?: "horizontal" | "vertical";
    showMarks?: boolean;
    step?: number;
    value?: number | number[];
    valueLabelDisplay?: "on" | "auto" | "off";
}

Type declaration

  • Optional className?: string

    Additional css classes to help with unique styling of the button

  • Optional defaultValue?: number

    The default value. Use when the component is not controlled.

  • Optional id?: string

    Optional unique identifier

  • Optional isDisabled?: boolean

    If true, the component is disabled.

    Default

    false
  • Optional max?: number

    The maximum allowed value of the slider. Should not be equal to min.

    Default

    100
  • Optional min?: number

    The minimum allowed value of the slider. Should not be equal to max.

    Default

    0
  • Optional onChange?: ((event, value, activeThumb) => void)

    Callback function that is fired when the slider's value changed.

      • (event, value, activeThumb): void

      • Parameters

        • event: Event

          The event source of the callback. You can pull out the new value by accessing event.target.value (any). Warning: This is a generic event not a change event.

        • value: number | number[]

          The new value.

        • activeThumb: number

          Index of the currently moved thumb.

        Returns void

  • Optional onChangeCommitted?: ((event, value) => void)

    Callback function that is fired when the mouseup is triggered.

      • (event, value): void

      • Parameters

        • event: Event | SyntheticEvent<Element, Event>

          The event source of the callback. Warning: This is a generic event not a change event.

        • value: number | number[]

          The new value.

        Returns void

  • Optional orientation?: "horizontal" | "vertical"

    The component orientation.

    Default

    'horizontal'
  • Optional showMarks?: boolean

    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.

    Default

    false
  • Optional step?: number

    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.

    Default

    1
  • Optional value?: number | number[]

    The value of the slider. For ranged sliders, provide an array with two values.

  • Optional valueLabelDisplay?: "on" | "auto" | "off"

    Controls when the value label is displayed:

    • auto the value label will display when the thumb is hovered or focused.
    • on will display persistently.
    • off will never display.

    Default

    'off'

Settings

Member Visibility

Theme