VRangeSlider

Base class for range-slider

Props

Name	Type	Description
aria-end-label	string	Aria label for the end thumb
aria-start-label	string	Aria label for the start thumb
connotation	Enum: accent cta	The connotation of the component
disabled	boolean	Sets the element's disabled state. A disabled element will not be included during form submission.
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.
end-as-number	number	The end property, typed as a number.
initial-end	string	The initial end value. This value sets the end property only when the end property has not been explicitly set.
initial-start	string	The initial start value. This value sets the start property only when the start property has not been explicitly set.
initial-value	string	The default value of the element. This value sets the value property only when the value property has not been explicitly set.
label	string	The label for the form element.
markers	boolean	Display markers on/off
max	number	The maximum value of the range.
min	number	The minimum value of the range.
name	string	The name of the element. This element's value will be surfaced during form submission under the provided name.
orientation	Enum: horizontal vertical	The orientation of the slider.
pin	boolean	Show current values on the thumbs.
required	boolean	Require the field to be completed prior to form submission.
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.
start-as-number	number	The start property, typed as a number.
step	number	Value to increment or decrement via arrow keys, mouse click or drag.
value	string	The current value of the element.
value-text-formatter	((value: string) => string)	Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.

Events

Name	Event Type	Description
change	CustomEvent<undefined>	Event emitted when either the start or end value changes.
input	CustomEvent<undefined>	Event emitted when either the start or end value changes.
input:end	CustomEvent<undefined>	Event emitted when the end value changes
input:start	CustomEvent<undefined>	Event emitted when the start value changes

Methods

Name	Type	Description
checkValidity	() => boolean	Return the current validity of the element.
formResetCallback	() => void
reportValidity	() => boolean	Return the current validity of the element. If false, fires an invalid event at the element.