@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaSlider

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

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

    https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=875-11860

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

    Hierarchy

    • ContourableInterface<this> & LitElement<this>
      • ZetaSlider
    Index

    Other

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

    rendering

    render

    updates

    updated

    Other

    • Returns ZetaSlider

    disabled?: boolean

    Disables the slider.

    leftHandle: HTMLDivElement
    lowerValue: number = 10

    The initial value of the lower end of the slider.

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

    max: number = 100

    The maximum value of the slider.

    min: number = 0

    The minimum value of the slider.

    rightHandle: HTMLDivElement
    rounded: boolean
    selectedArea: HTMLDivElement
    stepIncrement?: number

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

    track: HTMLDivElement
    type: "default" | "range" = "default"

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

    upperValue: number = 90

    The initial value of the maximum end of the slider.

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

    value: number = 50

    The value of the slider.

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

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