Slider
Allows users to choose from a range of values along a horizontal or vertical line
Use the connotation attribute on Slider to control the Slider track.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-slider aria-label="Slider with the accent connotation" connotation="accent" ></vwc-slider> <vwc-slider aria-label="Slider with the cta connotation" connotation="cta" ></vwc-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-slider aria-label="Slider with markers" markers></vwc-slider>
The orientation attribute controls which axis the Slider is aligned.
Below is an example of vertical alignment.
When used vertically, the Slider fits the height of its container.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-slider aria-label="Vertical slider" orientation="vertical"></vwc-slider>
Use pin attribute to display a tooltip on the Slider knob.
Use the valueTextFormatter member to customize the format of the value.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-slider aria-label="Slider with a pin" pin></vwc-slider>
<vwc-slider
aria-label="Vertical slider with a pin"
orientation="vertical"
style="height: 200px"
pin
></vwc-slider>
<script>
for (const slider of document.querySelectorAll('vwc-slider')) {
slider.valueTextFormatter = (value) => `${value} units`;
}
</script>
The disabled attribute disables the Slider.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-slider aria-label="Disabled slider" disabled></vwc-slider>