Description
sp-slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
Installation
npm install @spectrum-web-components/slider
# or
yarn add @spectrum-web-components/slider
Variants
Standard
<sp-slider></sp-slider>
<sp-slider disabled></sp-slider>
With Label
<sp-slider label="Slider Label"></sp-slider>
<sp-slider label="Slider Label - Disabled" disabled></sp-slider>
Filled
<sp-slider label="Slider Label" variant="filled"></sp-slider>
<sp-slider
label="Slider Label - Disabled"
variant="filled"
disabled
></sp-slider>
Tick
<sp-slider label="Slider Label" variant="tick" tick-step="5"></sp-slider>
<sp-slider
label="Slider Label - Disabled"
variant="tick"
tick-step="5"
disabled
></sp-slider>
Tick with Labels
<sp-slider
label="Slider Label"
variant="tick"
tick-step="5"
tick-labels
></sp-slider>
<sp-slider
label="Slider Label - Disabled"
variant="tick"
tick-step="5"
tick-labels
disabled
></sp-slider>
Ramp
<sp-slider label="Slider Label" variant="ramp"></sp-slider>
<sp-slider label="Slider Label - Disabled" variant="ramp" disabled></sp-slider>