Class ZetaSliderInputField

An input field using a Zeta Slider

ZetaSliderEvent:zeta-slider-change - Fired whenever value of slider is changed. Contains a single entry in detail: value:number.

Figma

https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=875-11860&node-type=canvas&m=dev

Storybook

https://zeta-ds.web.app/web/storybook/index.html?path=/docs/slider--docs

Hierarchy

  • ContourableInterface<this> & LitElement<this>
    • ZetaSliderInputField

Other

constructor disabled? error input label? max min name? rounded stepIncrement? value? styles

rendering

render

Other

constructor

  • new ZetaSliderInputField(): ZetaSliderInputField

  • Returns ZetaSliderInputField

Optionaldisabled

disabled?: boolean

Disables the input field.

error

error: boolean = false

Error state.

input

input: HTMLInputElement

Optionallabel

label?: string

The label displayed above the input.

max

max: number = 100

The maximum value of the slider input field.

min

min: number = 0

The minimum value of the slider input field.

Optionalname

name?: string

The name given to the input field.

rounded

rounded: boolean

OptionalstepIncrement

stepIncrement?: number

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

Optionalvalue

value?: number

The value of the input field.

Staticstyles

styles: CSSResultGroup[] = ...

rendering

Protectedrender

  • render(): TemplateResult<1>

  • 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>

Settings

Member Visibility

On This Page

Other
rendering