@material/slider

  • Version 11.0.0
  • Published
  • 831 kB
  • 10 dependencies
  • MIT license

Install

npm i @material/slider
yarn add @material/slider
pnpm add @material/slider

Overview

The Material Components for the web slider component

Index

Namespaces

namespace @material/slider

module '@material/slider' {}

    variable attributes

    const attributes: {
    ARIA_VALUETEXT: string;
    INPUT_DISABLED: string;
    INPUT_MIN: string;
    INPUT_MAX: string;
    INPUT_VALUE: string;
    INPUT_STEP: string;
    };
    • Slider attributes.

    variable cssClasses

    const cssClasses: {
    DISABLED: string;
    DISCRETE: string;
    INPUT: string;
    RANGE: string;
    THUMB: string;
    THUMB_FOCUSED: string;
    THUMB_KNOB: string;
    THUMB_TOP: string;
    THUMB_WITH_INDICATOR: string;
    TICK_MARKS: string;
    TICK_MARKS_CONTAINER: string;
    TICK_MARK_ACTIVE: string;
    TICK_MARK_INACTIVE: string;
    TRACK: string;
    TRACK_ACTIVE: string;
    VALUE_INDICATOR_TEXT: string;
    };
    • Slider element classes.

    variable events

    const events: { CHANGE: string; INPUT: string };
    • Slider events.

    variable numbers

    const numbers: { STEP_SIZE: number; THUMB_UPDATE_MIN_PX: number };
    • Slider numbers.

    class MDCSlider

    class MDCSlider extends MDCComponent<MDCSliderFoundation> {}
    • Vanilla JS implementation of slider component.

    property root

    root: HTMLElement;

      method attachTo

      static attachTo: (
      root: Element,
      options?: { skipInitialUIUpdate?: boolean }
      ) => MDCSlider;

        method getDefaultFoundation

        getDefaultFoundation: () => MDCSliderFoundation;

          method getDisabled

          getDisabled: () => boolean;
          • Slider disabled state.

          method getValue

          getValue: () => number;

            method getValueStart

            getValueStart: () => number;

              method initialize

              initialize: ({
              skipInitialUIUpdate,
              }?: {
              skipInitialUIUpdate?: boolean;
              }) => void;
              • Initializes component, with the following options: - skipInitialUIUpdate: Whether to skip updating the UI when initially syncing with the DOM. This should be enabled when the slider position is set before component initialization.

              method initialSyncWithDOM

              initialSyncWithDOM: () => void;

                method layout

                layout: () => void;
                • Redraws UI based on DOM (e.g. element dimensions, RTL).

                method setDisabled

                setDisabled: (disabled: boolean) => void;
                • Sets slider disabled state.

                method setValue

                setValue: (value: number) => void;

                  method setValueStart

                  setValueStart: (valueStart: number) => void;

                    method setValueToAriaValueTextFn

                    setValueToAriaValueTextFn: (mapFn: (value: number) => string) => void;
                    • Sets a function that maps the slider value to the value of the aria-valuetext attribute on the thumb element.

                    class MDCSliderFoundation

                    class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {}
                    • Foundation class for slider. Responsibilities include: - Updating slider values (internal state and DOM updates) based on client 'x' position. - Updating DOM after slider property updates (e.g. min, max).

                    constructor

                    constructor(adapter?: Partial<MDCSliderAdapter>);

                      property defaultAdapter

                      static readonly defaultAdapter: MDCSliderAdapter;

                        property SUPPORTS_POINTER_EVENTS

                        static SUPPORTS_POINTER_EVENTS: boolean;

                          method destroy

                          destroy: () => void;

                            method getDisabled

                            getDisabled: () => boolean;

                              method getIsRange

                              getIsRange: () => boolean;
                              • Whether the slider is a range slider.

                              method getMax

                              getMax: () => number;

                                method getMin

                                getMin: () => number;

                                  method getStep

                                  getStep: () => number;

                                    method getValue

                                    getValue: () => number;
                                    • - For single point sliders, returns the thumb value. - For range (two-thumb) sliders, returns the end thumb's value.

                                    method getValueStart

                                    getValueStart: () => number;
                                    • Only applicable for range sliders. The start thumb's value.

                                    method handleDown

                                    handleDown: (event: PointerEvent | MouseEvent | TouchEvent) => void;
                                    • Handles pointer down events on the slider root element.

                                    method handleInputBlur

                                    handleInputBlur: (thumb: Thumb) => void;
                                    • Removes activated state and value indicator from thumb(s).

                                    method handleInputChange

                                    handleInputChange: (thumb: Thumb) => void;
                                    • Handles input change event by setting internal slider value to match input's new value.

                                    method handleInputFocus

                                    handleInputFocus: (thumb: Thumb) => void;
                                    • Shows activated state and value indicator on thumb(s).

                                    method handleMousedownOrTouchstart

                                    handleMousedownOrTouchstart: (event: MouseEvent | TouchEvent) => void;

                                      method handleMove

                                      handleMove: (event: PointerEvent | MouseEvent | TouchEvent) => void;
                                      • Handles pointer move events on the slider root element.

                                      method handlePointerdown

                                      handlePointerdown: (event: PointerEvent) => void;

                                        method handleResize

                                        handleResize: () => void;
                                        • Handles resize events on the window.

                                        method handleThumbMouseenter

                                        handleThumbMouseenter: () => void;
                                        • For range, discrete slider, shows the value indicator on both thumbs.

                                        method handleThumbMouseleave

                                        handleThumbMouseleave: () => void;
                                        • For range, discrete slider, hides the value indicator on both thumbs.

                                        method handleUp

                                        handleUp: () => void;
                                        • Handles pointer up events on the slider root element.

                                        method init

                                        init: () => void;

                                          method layout

                                          layout: ({ skipUpdateUI }?: { skipUpdateUI?: boolean }) => void;
                                          • - Syncs slider boundingClientRect with the current DOM. - Updates UI based on internal state.

                                          method setDisabled

                                          setDisabled: (disabled: boolean) => void;
                                          • Sets disabled state, including updating styles and thumb tabindex.

                                          method setValue

                                          setValue: (value: number) => void;
                                          • - For single point sliders, sets the thumb value. - For range (two-thumb) sliders, sets the end thumb's value.

                                          method setValueStart

                                          setValueStart: (valueStart: number) => void;
                                          • Only applicable for range sliders. Sets the start thumb's value.

                                          interface MDCSliderAdapter

                                          interface MDCSliderAdapter {}
                                          • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                          method addClass

                                          addClass: (className: string) => void;
                                          • Adds the given class to the slider root element.

                                          method addThumbClass

                                          addThumbClass: (className: string, thumb: Thumb) => void;
                                          • Adds the class to the given thumb element.

                                          method deregisterBodyEventHandler

                                          deregisterBodyEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Deregisters an event listener on the body element.

                                          method deregisterEventHandler

                                          deregisterEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Deregisters an event listener on the root element.

                                          method deregisterInputEventHandler

                                          deregisterInputEventHandler: <K extends any>(
                                          thumb: Thumb,
                                          evtType: K,
                                          handler: any
                                          ) => void;
                                          • Deregisters an event listener on the given input element.

                                          method deregisterThumbEventHandler

                                          deregisterThumbEventHandler: <K extends any>(
                                          thumb: Thumb,
                                          evtType: K,
                                          handler: any
                                          ) => void;
                                          • Deregisters an event listener on the given thumb element.

                                          method deregisterWindowEventHandler

                                          deregisterWindowEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Deregisters an event listener on the window.

                                          method emitChangeEvent

                                          emitChangeEvent: (value: number, thumb: Thumb) => void;
                                          • Emits a change event from the slider root, indicating that the value has been changed and committed on the given thumb, from a user event. Mirrors the native change event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

                                          method emitDragEndEvent

                                          emitDragEndEvent: (value: number, thumb: Thumb) => void;
                                          • Emits an event on drag end, containing the final value on the thumb that was dragged.

                                          method emitDragStartEvent

                                          emitDragStartEvent: (value: number, thumb: Thumb) => void;
                                          • Emits an event on drag start, containing the current value on the thumb being dragged.

                                          method emitInputEvent

                                          emitInputEvent: (value: number, thumb: Thumb) => void;
                                          • Emits an input event from the slider root, indicating that the value has been changed on the given thumb, from a user event. Mirrors the native input event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

                                          method focusInput

                                          focusInput: (thumb: Thumb) => void;
                                          • - If thumb is Thumb.START, focuses start input (range slider variant). - If thumb is Thumb.END, focuses end input (or only input for single point slider).

                                          method getAttribute

                                          getAttribute: (attribute: string) => string | null;
                                          • Returns the given attribute value on the slider root element.

                                          method getBoundingClientRect

                                          getBoundingClientRect: () => ClientRect;
                                          • Returns the bounding client rect for the slider root element.

                                          method getInputAttribute

                                          getInputAttribute: (attribute: string, thumb: Thumb) => string | null;
                                          • - If thumb is Thumb.START, returns the attribute value on the start input (for range slider variant). - If thumb is Thumb.END, returns the attribute value on the end input (or only input for single point slider).

                                          method getInputValue

                                          getInputValue: (thumb: Thumb) => string;
                                          • - If thumb is Thumb.START, returns the value property on the start input (for range slider variant). - If thumb is Thumb.END, returns the value property on the end input (or only input for single point slider).

                                          method getThumbBoundingClientRect

                                          getThumbBoundingClientRect: (thumb: Thumb) => ClientRect;
                                          • Returns the bounding client rect of the given thumb.

                                          method getThumbKnobWidth

                                          getThumbKnobWidth: (thumb: Thumb) => number;
                                          • Returns the width of the given thumb knob.

                                          method getValueToAriaValueTextFn

                                          getValueToAriaValueTextFn: () => (value: number) => string;
                                          • Returns a function that maps the slider value to the value of the aria-valuetext attribute on the thumb element. If null, the aria-valuetext attribute is unchanged when the value changes.

                                          method hasClass

                                          hasClass: (className: string) => boolean;
                                          • Returns true if the slider root element has the given class.

                                          method isInputFocused

                                          isInputFocused: (thumb: Thumb) => boolean;
                                          • Returns true if the given input is focused.

                                          method isRTL

                                          isRTL: () => boolean;
                                          • Returns true if the root element is RTL, otherwise false

                                          method registerBodyEventHandler

                                          registerBodyEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Registers an event listener on the body element.

                                          method registerEventHandler

                                          registerEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Registers an event listener on the root element.

                                          method registerInputEventHandler

                                          registerInputEventHandler: <K extends any>(
                                          thumb: Thumb,
                                          evtType: K,
                                          handler: any
                                          ) => void;
                                          • Registers an event listener on the given input element.

                                          method registerThumbEventHandler

                                          registerThumbEventHandler: <K extends any>(
                                          thumb: Thumb,
                                          evtType: K,
                                          handler: any
                                          ) => void;
                                          • Registers an event listener on the given thumb element.

                                          method registerWindowEventHandler

                                          registerWindowEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                          • Registers an event listener on the window.

                                          method removeClass

                                          removeClass: (className: string) => void;
                                          • Removes the given class from the slider root element.

                                          method removeInputAttribute

                                          removeInputAttribute: (attribute: string, thumb: Thumb) => void;
                                          • - If thumb is Thumb.START, removes the attribute on the start input (for range slider variant). - If thumb is Thumb.END, removes the attribute on the end input (or only input for single point slider).

                                          method removeThumbClass

                                          removeThumbClass: (className: string, thumb: Thumb) => void;
                                          • Removes the class from the given thumb element.

                                          method removeThumbStyleProperty

                                          removeThumbStyleProperty: (propertyName: string, thumb: Thumb) => void;
                                          • Removes the given style property from the thumb element. - If thumb is Thumb.START, removes style from the start thumb (for range slider variant). - If thumb is Thumb.END, removes style from the end thumb (or only thumb for single point slider).

                                          method removeTrackActiveStyleProperty

                                          removeTrackActiveStyleProperty: (propertyName: string) => void;
                                          • Removes the given style property from the active track element.

                                          method setInputAttribute

                                          setInputAttribute: (attribute: string, value: string, thumb: Thumb) => void;
                                          • - If thumb is Thumb.START, sets the attribute on the start input (for range slider variant). - If thumb is Thumb.END, sets the attribute on the end input (or only input for single point slider).

                                          method setInputValue

                                          setInputValue: (value: string, thumb: Thumb) => void;
                                          • - If thumb is Thumb.START, sets the value property on the start input (for range slider variant). - If thumb is Thumb.END, sets the value property on the end input (or only input for single point slider).

                                          method setPointerCapture

                                          setPointerCapture: (pointerId: number) => void;
                                          • Sets pointer capture on the slider root. https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture

                                          method setThumbStyleProperty

                                          setThumbStyleProperty: (
                                          propertyName: string,
                                          value: string,
                                          thumb: Thumb
                                          ) => void;
                                          • Sets a style property of the thumb element to the passed value. - If thumb is Thumb.START, sets style on the start thumb (for range slider variant). - If thumb is Thumb.END, sets style on the end thumb (or only thumb for single point slider).

                                          method setTrackActiveStyleProperty

                                          setTrackActiveStyleProperty: (propertyName: string, value: string) => void;
                                          • Sets a style property of the active track element to the passed value.

                                          method setValueIndicatorText

                                          setValueIndicatorText: (value: number, thumb: Thumb) => void;
                                          • Sets value indicator text based on the given value. - If thumb is Thumb.START, updates value indicator on start thumb (for range slider variant). - If thumb is Thumb.END, updates value indicator on end thumb (or only thumb for single point slider).

                                          method updateTickMarks

                                          updateTickMarks: (tickMarks: TickMark[]) => void;
                                          • Updates tick marks container element with tick mark elements and their active/inactive classes, based on the given mappings: - TickMark.ACTIVE => cssClasses.TICK_MARK_ACTIVE - TickMark.INACTIVE => cssClasses.TICK_MARK_INACTIVE

                                          interface MDCSliderChangeEventDetail

                                          interface MDCSliderChangeEventDetail {}
                                          • Interface for detail of slider custom change and input events.

                                          property thumb

                                          thumb: Thumb;

                                            property value

                                            value: number;

                                              enum Thumb

                                              enum Thumb {
                                              START = 1,
                                              END = 2,
                                              }
                                              • Thumb types: range slider has two thumbs (START, END) whereas single point slider only has one thumb (END).

                                              member END

                                              END = 2

                                                member START

                                                START = 1

                                                  enum TickMark

                                                  enum TickMark {
                                                  ACTIVE = 0,
                                                  INACTIVE = 1,
                                                  }
                                                  • Tick mark enum, for discrete sliders.

                                                  member ACTIVE

                                                  ACTIVE = 0

                                                    member INACTIVE

                                                    INACTIVE = 1

                                                      namespace @material/slider/adapter

                                                      module '@material/slider/adapter' {}

                                                        interface MDCSliderAdapter

                                                        interface MDCSliderAdapter {}
                                                        • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                                        method addClass

                                                        addClass: (className: string) => void;
                                                        • Adds the given class to the slider root element.

                                                        method addThumbClass

                                                        addThumbClass: (className: string, thumb: Thumb) => void;
                                                        • Adds the class to the given thumb element.

                                                        method deregisterBodyEventHandler

                                                        deregisterBodyEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Deregisters an event listener on the body element.

                                                        method deregisterEventHandler

                                                        deregisterEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Deregisters an event listener on the root element.

                                                        method deregisterInputEventHandler

                                                        deregisterInputEventHandler: <K extends any>(
                                                        thumb: Thumb,
                                                        evtType: K,
                                                        handler: any
                                                        ) => void;
                                                        • Deregisters an event listener on the given input element.

                                                        method deregisterThumbEventHandler

                                                        deregisterThumbEventHandler: <K extends any>(
                                                        thumb: Thumb,
                                                        evtType: K,
                                                        handler: any
                                                        ) => void;
                                                        • Deregisters an event listener on the given thumb element.

                                                        method deregisterWindowEventHandler

                                                        deregisterWindowEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Deregisters an event listener on the window.

                                                        method emitChangeEvent

                                                        emitChangeEvent: (value: number, thumb: Thumb) => void;
                                                        • Emits a change event from the slider root, indicating that the value has been changed and committed on the given thumb, from a user event. Mirrors the native change event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

                                                        method emitDragEndEvent

                                                        emitDragEndEvent: (value: number, thumb: Thumb) => void;
                                                        • Emits an event on drag end, containing the final value on the thumb that was dragged.

                                                        method emitDragStartEvent

                                                        emitDragStartEvent: (value: number, thumb: Thumb) => void;
                                                        • Emits an event on drag start, containing the current value on the thumb being dragged.

                                                        method emitInputEvent

                                                        emitInputEvent: (value: number, thumb: Thumb) => void;
                                                        • Emits an input event from the slider root, indicating that the value has been changed on the given thumb, from a user event. Mirrors the native input event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

                                                        method focusInput

                                                        focusInput: (thumb: Thumb) => void;
                                                        • - If thumb is Thumb.START, focuses start input (range slider variant). - If thumb is Thumb.END, focuses end input (or only input for single point slider).

                                                        method getAttribute

                                                        getAttribute: (attribute: string) => string | null;
                                                        • Returns the given attribute value on the slider root element.

                                                        method getBoundingClientRect

                                                        getBoundingClientRect: () => ClientRect;
                                                        • Returns the bounding client rect for the slider root element.

                                                        method getInputAttribute

                                                        getInputAttribute: (attribute: string, thumb: Thumb) => string | null;
                                                        • - If thumb is Thumb.START, returns the attribute value on the start input (for range slider variant). - If thumb is Thumb.END, returns the attribute value on the end input (or only input for single point slider).

                                                        method getInputValue

                                                        getInputValue: (thumb: Thumb) => string;
                                                        • - If thumb is Thumb.START, returns the value property on the start input (for range slider variant). - If thumb is Thumb.END, returns the value property on the end input (or only input for single point slider).

                                                        method getThumbBoundingClientRect

                                                        getThumbBoundingClientRect: (thumb: Thumb) => ClientRect;
                                                        • Returns the bounding client rect of the given thumb.

                                                        method getThumbKnobWidth

                                                        getThumbKnobWidth: (thumb: Thumb) => number;
                                                        • Returns the width of the given thumb knob.

                                                        method getValueToAriaValueTextFn

                                                        getValueToAriaValueTextFn: () => (value: number) => string;
                                                        • Returns a function that maps the slider value to the value of the aria-valuetext attribute on the thumb element. If null, the aria-valuetext attribute is unchanged when the value changes.

                                                        method hasClass

                                                        hasClass: (className: string) => boolean;
                                                        • Returns true if the slider root element has the given class.

                                                        method isInputFocused

                                                        isInputFocused: (thumb: Thumb) => boolean;
                                                        • Returns true if the given input is focused.

                                                        method isRTL

                                                        isRTL: () => boolean;
                                                        • Returns true if the root element is RTL, otherwise false

                                                        method registerBodyEventHandler

                                                        registerBodyEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Registers an event listener on the body element.

                                                        method registerEventHandler

                                                        registerEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Registers an event listener on the root element.

                                                        method registerInputEventHandler

                                                        registerInputEventHandler: <K extends any>(
                                                        thumb: Thumb,
                                                        evtType: K,
                                                        handler: any
                                                        ) => void;
                                                        • Registers an event listener on the given input element.

                                                        method registerThumbEventHandler

                                                        registerThumbEventHandler: <K extends any>(
                                                        thumb: Thumb,
                                                        evtType: K,
                                                        handler: any
                                                        ) => void;
                                                        • Registers an event listener on the given thumb element.

                                                        method registerWindowEventHandler

                                                        registerWindowEventHandler: <K extends any>(evtType: K, handler: any) => void;
                                                        • Registers an event listener on the window.

                                                        method removeClass

                                                        removeClass: (className: string) => void;
                                                        • Removes the given class from the slider root element.

                                                        method removeInputAttribute

                                                        removeInputAttribute: (attribute: string, thumb: Thumb) => void;
                                                        • - If thumb is Thumb.START, removes the attribute on the start input (for range slider variant). - If thumb is Thumb.END, removes the attribute on the end input (or only input for single point slider).

                                                        method removeThumbClass

                                                        removeThumbClass: (className: string, thumb: Thumb) => void;
                                                        • Removes the class from the given thumb element.

                                                        method removeThumbStyleProperty

                                                        removeThumbStyleProperty: (propertyName: string, thumb: Thumb) => void;
                                                        • Removes the given style property from the thumb element. - If thumb is Thumb.START, removes style from the start thumb (for range slider variant). - If thumb is Thumb.END, removes style from the end thumb (or only thumb for single point slider).

                                                        method removeTrackActiveStyleProperty

                                                        removeTrackActiveStyleProperty: (propertyName: string) => void;
                                                        • Removes the given style property from the active track element.

                                                        method setInputAttribute

                                                        setInputAttribute: (attribute: string, value: string, thumb: Thumb) => void;
                                                        • - If thumb is Thumb.START, sets the attribute on the start input (for range slider variant). - If thumb is Thumb.END, sets the attribute on the end input (or only input for single point slider).

                                                        method setInputValue

                                                        setInputValue: (value: string, thumb: Thumb) => void;
                                                        • - If thumb is Thumb.START, sets the value property on the start input (for range slider variant). - If thumb is Thumb.END, sets the value property on the end input (or only input for single point slider).

                                                        method setPointerCapture

                                                        setPointerCapture: (pointerId: number) => void;
                                                        • Sets pointer capture on the slider root. https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture

                                                        method setThumbStyleProperty

                                                        setThumbStyleProperty: (
                                                        propertyName: string,
                                                        value: string,
                                                        thumb: Thumb
                                                        ) => void;
                                                        • Sets a style property of the thumb element to the passed value. - If thumb is Thumb.START, sets style on the start thumb (for range slider variant). - If thumb is Thumb.END, sets style on the end thumb (or only thumb for single point slider).

                                                        method setTrackActiveStyleProperty

                                                        setTrackActiveStyleProperty: (propertyName: string, value: string) => void;
                                                        • Sets a style property of the active track element to the passed value.

                                                        method setValueIndicatorText

                                                        setValueIndicatorText: (value: number, thumb: Thumb) => void;
                                                        • Sets value indicator text based on the given value. - If thumb is Thumb.START, updates value indicator on start thumb (for range slider variant). - If thumb is Thumb.END, updates value indicator on end thumb (or only thumb for single point slider).

                                                        method updateTickMarks

                                                        updateTickMarks: (tickMarks: TickMark[]) => void;
                                                        • Updates tick marks container element with tick mark elements and their active/inactive classes, based on the given mappings: - TickMark.ACTIVE => cssClasses.TICK_MARK_ACTIVE - TickMark.INACTIVE => cssClasses.TICK_MARK_INACTIVE

                                                        namespace @material/slider/component

                                                        module '@material/slider/component' {}

                                                          class MDCSlider

                                                          class MDCSlider extends MDCComponent<MDCSliderFoundation> {}
                                                          • Vanilla JS implementation of slider component.

                                                          property root

                                                          root: HTMLElement;

                                                            method attachTo

                                                            static attachTo: (
                                                            root: Element,
                                                            options?: { skipInitialUIUpdate?: boolean }
                                                            ) => MDCSlider;

                                                              method getDefaultFoundation

                                                              getDefaultFoundation: () => MDCSliderFoundation;

                                                                method getDisabled

                                                                getDisabled: () => boolean;
                                                                • Slider disabled state.

                                                                method getValue

                                                                getValue: () => number;

                                                                  method getValueStart

                                                                  getValueStart: () => number;

                                                                    method initialize

                                                                    initialize: ({
                                                                    skipInitialUIUpdate,
                                                                    }?: {
                                                                    skipInitialUIUpdate?: boolean;
                                                                    }) => void;
                                                                    • Initializes component, with the following options: - skipInitialUIUpdate: Whether to skip updating the UI when initially syncing with the DOM. This should be enabled when the slider position is set before component initialization.

                                                                    method initialSyncWithDOM

                                                                    initialSyncWithDOM: () => void;

                                                                      method layout

                                                                      layout: () => void;
                                                                      • Redraws UI based on DOM (e.g. element dimensions, RTL).

                                                                      method setDisabled

                                                                      setDisabled: (disabled: boolean) => void;
                                                                      • Sets slider disabled state.

                                                                      method setValue

                                                                      setValue: (value: number) => void;

                                                                        method setValueStart

                                                                        setValueStart: (valueStart: number) => void;

                                                                          method setValueToAriaValueTextFn

                                                                          setValueToAriaValueTextFn: (mapFn: (value: number) => string) => void;
                                                                          • Sets a function that maps the slider value to the value of the aria-valuetext attribute on the thumb element.

                                                                          namespace @material/slider/constants

                                                                          module '@material/slider/constants' {}

                                                                            variable attributes

                                                                            const attributes: {
                                                                            ARIA_VALUETEXT: string;
                                                                            INPUT_DISABLED: string;
                                                                            INPUT_MIN: string;
                                                                            INPUT_MAX: string;
                                                                            INPUT_VALUE: string;
                                                                            INPUT_STEP: string;
                                                                            };
                                                                            • Slider attributes.

                                                                            variable cssClasses

                                                                            const cssClasses: {
                                                                            DISABLED: string;
                                                                            DISCRETE: string;
                                                                            INPUT: string;
                                                                            RANGE: string;
                                                                            THUMB: string;
                                                                            THUMB_FOCUSED: string;
                                                                            THUMB_KNOB: string;
                                                                            THUMB_TOP: string;
                                                                            THUMB_WITH_INDICATOR: string;
                                                                            TICK_MARKS: string;
                                                                            TICK_MARKS_CONTAINER: string;
                                                                            TICK_MARK_ACTIVE: string;
                                                                            TICK_MARK_INACTIVE: string;
                                                                            TRACK: string;
                                                                            TRACK_ACTIVE: string;
                                                                            VALUE_INDICATOR_TEXT: string;
                                                                            };
                                                                            • Slider element classes.

                                                                            variable events

                                                                            const events: { CHANGE: string; INPUT: string };
                                                                            • Slider events.

                                                                            variable numbers

                                                                            const numbers: { STEP_SIZE: number; THUMB_UPDATE_MIN_PX: number };
                                                                            • Slider numbers.

                                                                            namespace @material/slider/foundation

                                                                            module '@material/slider/foundation' {}

                                                                              class MDCSliderFoundation

                                                                              class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {}
                                                                              • Foundation class for slider. Responsibilities include: - Updating slider values (internal state and DOM updates) based on client 'x' position. - Updating DOM after slider property updates (e.g. min, max).

                                                                              constructor

                                                                              constructor(adapter?: Partial<MDCSliderAdapter>);

                                                                                property defaultAdapter

                                                                                static readonly defaultAdapter: MDCSliderAdapter;

                                                                                  property SUPPORTS_POINTER_EVENTS

                                                                                  static SUPPORTS_POINTER_EVENTS: boolean;

                                                                                    method destroy

                                                                                    destroy: () => void;

                                                                                      method getDisabled

                                                                                      getDisabled: () => boolean;

                                                                                        method getIsRange

                                                                                        getIsRange: () => boolean;
                                                                                        • Whether the slider is a range slider.

                                                                                        method getMax

                                                                                        getMax: () => number;

                                                                                          method getMin

                                                                                          getMin: () => number;

                                                                                            method getStep

                                                                                            getStep: () => number;

                                                                                              method getValue

                                                                                              getValue: () => number;
                                                                                              • - For single point sliders, returns the thumb value. - For range (two-thumb) sliders, returns the end thumb's value.

                                                                                              method getValueStart

                                                                                              getValueStart: () => number;
                                                                                              • Only applicable for range sliders. The start thumb's value.

                                                                                              method handleDown

                                                                                              handleDown: (event: PointerEvent | MouseEvent | TouchEvent) => void;
                                                                                              • Handles pointer down events on the slider root element.

                                                                                              method handleInputBlur

                                                                                              handleInputBlur: (thumb: Thumb) => void;
                                                                                              • Removes activated state and value indicator from thumb(s).

                                                                                              method handleInputChange

                                                                                              handleInputChange: (thumb: Thumb) => void;
                                                                                              • Handles input change event by setting internal slider value to match input's new value.

                                                                                              method handleInputFocus

                                                                                              handleInputFocus: (thumb: Thumb) => void;
                                                                                              • Shows activated state and value indicator on thumb(s).

                                                                                              method handleMousedownOrTouchstart

                                                                                              handleMousedownOrTouchstart: (event: MouseEvent | TouchEvent) => void;

                                                                                                method handleMove

                                                                                                handleMove: (event: PointerEvent | MouseEvent | TouchEvent) => void;
                                                                                                • Handles pointer move events on the slider root element.

                                                                                                method handlePointerdown

                                                                                                handlePointerdown: (event: PointerEvent) => void;

                                                                                                  method handleResize

                                                                                                  handleResize: () => void;
                                                                                                  • Handles resize events on the window.

                                                                                                  method handleThumbMouseenter

                                                                                                  handleThumbMouseenter: () => void;
                                                                                                  • For range, discrete slider, shows the value indicator on both thumbs.

                                                                                                  method handleThumbMouseleave

                                                                                                  handleThumbMouseleave: () => void;
                                                                                                  • For range, discrete slider, hides the value indicator on both thumbs.

                                                                                                  method handleUp

                                                                                                  handleUp: () => void;
                                                                                                  • Handles pointer up events on the slider root element.

                                                                                                  method init

                                                                                                  init: () => void;

                                                                                                    method layout

                                                                                                    layout: ({ skipUpdateUI }?: { skipUpdateUI?: boolean }) => void;
                                                                                                    • - Syncs slider boundingClientRect with the current DOM. - Updates UI based on internal state.

                                                                                                    method setDisabled

                                                                                                    setDisabled: (disabled: boolean) => void;
                                                                                                    • Sets disabled state, including updating styles and thumb tabindex.

                                                                                                    method setValue

                                                                                                    setValue: (value: number) => void;
                                                                                                    • - For single point sliders, sets the thumb value. - For range (two-thumb) sliders, sets the end thumb's value.

                                                                                                    method setValueStart

                                                                                                    setValueStart: (valueStart: number) => void;
                                                                                                    • Only applicable for range sliders. Sets the start thumb's value.

                                                                                                    namespace @material/slider/types

                                                                                                    module '@material/slider/types' {}

                                                                                                      interface MDCSliderChangeEventDetail

                                                                                                      interface MDCSliderChangeEventDetail {}
                                                                                                      • Interface for detail of slider custom change and input events.

                                                                                                      property thumb

                                                                                                      thumb: Thumb;

                                                                                                        property value

                                                                                                        value: number;

                                                                                                          enum Thumb

                                                                                                          enum Thumb {
                                                                                                          START = 1,
                                                                                                          END = 2,
                                                                                                          }
                                                                                                          • Thumb types: range slider has two thumbs (START, END) whereas single point slider only has one thumb (END).

                                                                                                          member END

                                                                                                          END = 2

                                                                                                            member START

                                                                                                            START = 1

                                                                                                              enum TickMark

                                                                                                              enum TickMark {
                                                                                                              ACTIVE = 0,
                                                                                                              INACTIVE = 1,
                                                                                                              }
                                                                                                              • Tick mark enum, for discrete sliders.

                                                                                                              member ACTIVE

                                                                                                              ACTIVE = 0

                                                                                                                member INACTIVE

                                                                                                                INACTIVE = 1

                                                                                                                  Package Files (1)

                                                                                                                  Dependencies (10)

                                                                                                                  Dev Dependencies (0)

                                                                                                                  No dev dependencies.

                                                                                                                  Peer Dependencies (0)

                                                                                                                  No peer dependencies.

                                                                                                                  Badge

                                                                                                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/slider.

                                                                                                                  • Markdown
                                                                                                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/slider)
                                                                                                                  • HTML
                                                                                                                    <a href="https://www.jsdocs.io/package/@material/slider"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>