OptionalcheckedDisables the input field.
Error state.
Returns the value of element's id content attribute. Can be set to change it.
The initial values of the range selector
OptionallabelThe label displayed above the input.
The maximum value of the slider input field.
The minimum value of the slider input field.
The name given to the input field. This is required when in a form.
OptionalstepIf set, will put steps on the slider at the given increments and the slider will snap to the nearest step.
StaticstylesProtectedrenderInvoked 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.
ProtectedfirstInvoked 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.
A ranged input field using a Zeta Slider
The "name" is required when in a form.
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=980-16448&m=dev
Storybook
https://design.zebra.com/web/storybook/index.html?path=/story/components-range-selector--range-slider