A ranged input field using a Zeta Slider

The "name" is required when in a form.

ZetaRangeSliderEvent:zeta-range-slider-change - Fired whenever value of range slider is changed. Contains 2 values in details: min:number, max:number.

Hierarchy

  • FormFieldInterface<this> & LitElement<this> & ContourableInterface<this>
    • ZetaRangeSelector

Other

  • Returns ZetaRangeSelector

checked?: boolean
disabled: boolean

Disables the input field.

error: boolean = false

Error state.

hiddenInput: HTMLInputElement
id: string = "hidden-range-selector-input"

Returns the value of element's id content attribute. Can be set to change it.

MDN Reference

indeterminate: boolean
initialValues: ZetaRangeValues = ...

The initial values of the range selector

input: HTMLInputElement
internals: ElementInternals
label?: string

The label displayed above the input.

lowerInput: HTMLInputElement
max: number = 100

The maximum value of the slider input field.

min: number = 0

The minimum value of the slider input field.

name: string

The name given to the input field. This is required when in a form.

required: boolean
rounded: boolean
stepIncrement?: number

If set, will put steps on the slider at the given increments and the slider will snap to the nearest step.

type: InputType = "range-selector"
upperInput: HTMLInputElement
value: string
styles: CSSResultGroup[] = ...

rendering

  • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

    Returns TemplateResult<1>

updates

  • Invoked when the element is first updated. Implement to perform one time work on the element after update.

    firstUpdated() {
    this.renderRoot.getElementById('my-text-area').focus();
    }

    Setting properties inside this method will trigger the element to update again after this update cycle completes.

    Returns void