Slider
Sliders allow the user to select a single value within a given range using a slider.
<wa-slider>
component!
<label>Select a value: <input type="range"></label>
Min, Max, and Step Jump to heading
Use the min
and max
attributes to set the range's minimum and maximum values, respectively. The step
attribute determines the value's interval when increasing and decreasing.
<input type="range" min="0" max="10" step="1">
Disabled Jump to heading
Use the disabled
attribute to disable a slider.
<input type="range" disabled>
Opting In to Native Slider Styles Jump to heading
If you want to use the Native Slider styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/slider.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/slider.css');
To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.