Range Slider
Allows users to select a range. It includes two thumb controls that can be dragged to set the start and end values.
Use the connotation attribute on Range Slider to control the color of the selected range.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-range-slider connotation="accent"></vwc-range-slider> <vwc-range-slider connotation="cta"></vwc-range-slider>
Use the markers attribute to add tick marks on the slider.
The markers are set by the value of step.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-range-slider markers></vwc-range-slider>
The orientation attribute controls which axis the Range Slider is aligned.
Below is an example of vertical alignment.
When used vertically, the range slider fits the height of its container.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-range-slider orientation="vertical"></vwc-range-slider>
Use pin attribute to display a tooltip at the start and end values.
Use the valueTextFormatter member to customize the format of the values.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-range-slider pin id="slider"></vwc-range-slider>
<vwc-range-slider
orientation="vertical"
style="height: 200px"
pin
></vwc-range-slider>
<script>
for (const slider of document.querySelectorAll('#slider')) {
slider.valueTextFormatter = (value) => `${value} units`;
}
</script>
The disabled attribute disables the Range Slider.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-range-slider disabled></vwc-range-slider>