Class ZetaSlider

Sliders allow users to make selections from a range of values.

ZetaSliderEvent:zeta-slider-change - Fired whenever value of slider is changed. Contains a single entry in details: value:number. ZetaRangeSliderEvent:zeta-range-slider-change - Fired whenever value of range slider is changed. Contains 2 values in details: min:number, max: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>
    • ZetaSlider

Other

constructor disabled? leftHandle lowerValue max min rightHandle rounded selectedArea stepIncrement? track type upperValue value styles

rendering

render

updates

updated

Other

constructor

  • new ZetaSlider(): ZetaSlider

  • Returns ZetaSlider

Optionaldisabled

disabled?: boolean

Disables the slider.

leftHandle

leftHandle: HTMLDivElement

lowerValue

lowerValue: number = 10

The initial value of the lower end of the slider.

Will have no effect if type is not 'ranged'.

max

max: number = 100

The maximum value of the slider.

min

min: number = 0

The minimum value of the slider.

rightHandle

rightHandle: HTMLDivElement

rounded

rounded: boolean

selectedArea

selectedArea: HTMLDivElement

OptionalstepIncrement

stepIncrement?: number

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

track

track: HTMLDivElement

type

type: "default" | "range" = "default"

The type of the slider. Can either be 'default' or 'range'.

upperValue

upperValue: number = 90

The initial value of the maximum end of the slider.

Will have no effect if type is not 'ranged'.

value

value: number = 50

The value of the slider.

Will have no effect if type is not 'default'.

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>

updates

updated

  • updated(): void

  • Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

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

    Returns void

Settings

Member Visibility

On This Page

Other
rendering
updates