Class HTMLRangePickerElement

A custom HTML element responsible selecting a value on a range slider with a linked number input field.

Hierarchy (view full)

Properties

_primaryInput _value _internals #rangeInput #numberInput #min #max #step tagName formAssociated

Accessors

valueAsNumber value form name disabled editable

Methods

_buildElements _setValue _refresh _activateListeners _toggleDisabled connectedCallback _applyInputAttributes _getValue _onClick #onDragSlider #onChangeInput create

Properties

Protected _primaryInput

_primaryInput: HTMLElement

The primary input (if any). Used to determine what element should receive focus when an associated label is clicked on.

Protected _value

_value: number

The underlying value of the element.

Protected _internals

_internals: ElementInternals

Attached ElementInternals which provides form handling functionality.

Private #rangeInput

#rangeInput: HTMLInputElement

The range input.

Private #numberInput

#numberInput: HTMLInputElement

The number input.

Private #min

#min: number

The minimum allowed value for the range.

Private #max

#max: number

The maximum allowed value for the range.

Private #step

#step: number

A required step size for the range.

Static tagName

tagName: string = "range-picker"

Static formAssociated

formAssociated: boolean = true

Declare that this custom element provides form element functionality.

Accessors

valueAsNumber

  • get valueAsNumber(): number

  • The value of the input element.

    Returns number

value

form

  • get form(): HTMLFormElement

  • The form this element belongs to.

    Returns HTMLFormElement

name

  • get name(): string

  • The input element name.

    Returns string

disabled

  • get disabled(): boolean

  • Is this element disabled?

    Returns boolean

editable

  • get editable(): boolean

  • Is this field editable? The field can be neither disabled nor readonly.

    Returns boolean

Methods

_buildElements

_setValue

_refresh

_activateListeners

_toggleDisabled

connectedCallback

_applyInputAttributes

  • _applyInputAttributes(input): void
  • Internal

    Apply key attributes on the containing custom HTML element to input elements contained within it.

    Parameters

    • input: any

    Returns void

Protected _getValue

  • _getValue(): number
  • Protected

    Return the value of the input element which should be submitted to the form.

    Returns number

Protected _onClick

  • _onClick(event): void
  • Protected

    Special handling when the custom element is clicked. This should be implemented to transfer focus to an appropriate internal element.

    Parameters

    • event: PointerEvent

    Returns void

Private #onDragSlider

  • #onDragSlider(event): void

  • Update display of the number input as the range slider is actively changed.

    Parameters

    • event: InputEvent

      The originating input event

    Returns void

Private #onChangeInput

  • #onChangeInput(event): void

  • Handle changes to one of the inputs of the range picker element.

    Parameters

    • event: InputEvent

      The originating input change event

    Returns void

Static create

Settings

Member Visibility

Theme

On This Page

_primaryInput_value_internals#rangeInput#numberInput#min#max#steptagNameformAssociatedvalueAsNumbervalueformnamedisablededitable_buildElements_setValue_refresh_activateListeners_toggleDisabledconnectedCallback_applyInputAttributes_getValue_onClick#onDragSlider#onChangeInputcreate