@material/slider

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.

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 getMinRange

getMinRange: () => 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 setHasTickMarks

setHasTickMarks: (value: boolean) => void;

method setIsDiscrete

setIsDiscrete: (value: boolean) => void;

method setMax

setMax: (value: number) => void;

method setMin

setMin: (value: number) => void;

method setMinRange

setMinRange: (value: number) => void;

• Only applicable for range sliders. Sets the minimum difference between the start and end values.

method setStep

setStep: (value: number) => void;

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.

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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Deregisters an event listener on the body element.

method deregisterEventHandler

deregisterEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Deregisters an event listener on the root element.

method deregisterInputEventHandler

deregisterInputEventHandler: <K extends EventType>(
    thumb: Thumb,
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Deregisters an event listener on the given input element.

method deregisterThumbEventHandler

deregisterThumbEventHandler: <K extends EventType>(
    thumb: Thumb,
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Deregisters an event listener on the given thumb element.

method deregisterWindowEventHandler

deregisterWindowEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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: () => DOMRect;

• 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) => DOMRect;

• Returns the bounding client rect of the given thumb.

method getThumbKnobWidth

getThumbKnobWidth: (thumb: Thumb) => number;

• Returns the width of the given thumb knob.

method getValueIndicatorContainerWidth

getValueIndicatorContainerWidth: (thumb: Thumb) => number;

• Returns the width of the given value indicator container.

method getValueToAriaValueTextFn

getValueToAriaValueTextFn: () => (value: number, thumb: Thumb) => 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 EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Registers an event listener on the body element.

method registerEventHandler

registerEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Registers an event listener on the root element.

method registerInputEventHandler

registerInputEventHandler: <K extends EventType>(
    thumb: Thumb,
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Registers an event listener on the given input element.

method registerThumbEventHandler

registerThumbEventHandler: <K extends EventType>(
    thumb: Thumb,
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

• Registers an event listener on the given thumb element.

method registerWindowEventHandler

registerWindowEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => 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 shouldHideFocusStylesForPointerEvents

shouldHideFocusStylesForPointerEvents: () => boolean;

• Returns true if focus styles should be hidden for pointer events.

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

property thumb

thumb: Thumb;

property value

value: number;

member END

END = 2

member START

START = 1

member ACTIVE

ACTIVE = 0

member INACTIVE

INACTIVE = 1