Native Styles

Slider

<input type=range>

Sliders allow the user to select a single value within a given range using a slider.

Want to do more? Check out the <wa-slider> component! 
<label>Select a value: <input type="range"></label>

Min, Max, and Step

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

Use the disabled attribute to disable a slider.

<input type="range" disabled>

Opting In to Native Slider Styles

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.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/native/slider.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/native/slider.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results