@material/slider

  • Version 13.0.0
  • Published
  • 858 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

Variables

Classes

Interfaces

Enums

Variables

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.

Classes

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 setHasTickMarks

                                        setHasTickMarks: (value: boolean) => void;

                                          method setIsDiscrete

                                          setIsDiscrete: (value: boolean) => void;

                                            method setMax

                                            setMax: (value: number) => void;

                                              method setMin

                                              setMin: (value: number) => void;

                                                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.

                                                  Interfaces

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

                                                      Enums

                                                      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 (6)

                                                              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>