VRangeSlider
Base class for range-slider
Props
| Name | Type | Description |
|---|---|---|
| label | string | The label for the form element. |
| aria-current | Enum:pagesteplocationdatetimetruefalse | Indicates the element that represents the current item within a container or set of related elements. |
| disabled | boolean | Sets the element's disabled state. A disabled element will not be included during form submission. |
| initial-value | string | The initial value of the form. This value sets the value property only when the value property has not been explicitly set. |
| value | string | The current value of the element. This property serves as a mechanism to set the value property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. |
| name | string | The name of the element. This element's value will be surfaced during form submission under the provided name. |
| required | boolean | Require the field to be completed prior to form submission. |
| initial-start | string | The initial start value. This value sets the start property only when the start property has not been explicitly set. |
| start | string | The current start value of the element. This property serves as a mechanism to set the start property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. |
| initial-end | string | The initial end value. This value sets the end property only when the end property has not been explicitly set. |
| end | string | The current end value of the element. This property serves as a mechanism to set the end property through both property assignment and the .setAttribute() method. This is useful for setting the field's value in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. |
| min | number | The minimum value of the range. |
| max | number | The maximum value of the range. |
| step | number | Value to increment or decrement via arrow keys, mouse click or drag. |
| orientation | Enum:horizontalvertical | The orientation of the slider. |
| aria-start-label | string | Aria label for the start thumb |
| aria-end-label | string | Aria label for the end thumb |
| markers | boolean | Display markers on/off |
| connotation | Enum:accentcta | The connotation of the component |
| pin | boolean | Show current values on the thumbs. |
Events
| Name | Event Type | Description |
|---|---|---|
| click | MouseEvent | Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element. |
| focus | FocusEvent | Fires when the element receives focus. |
| blur | FocusEvent | Fires when the element loses focus. |
| keydown | KeyboardEvent | Fires when a key is pressed. |
| keyup | KeyboardEvent | Fires when a key is released. |
| input:start | CustomEvent<undefined> | Event emitted when the start value changes |
| input:end | CustomEvent<undefined> | Event emitted when the end value changes |
| input | CustomEvent<undefined> | Event emitted when either the start or end value changes. |
| change | CustomEvent<undefined> | Event emitted when either the start or end value changes. |
Methods
| Name | Type | Description |
|---|---|---|
| formResetCallback | () => unknown |