A range slider input
| 1 |
<input type="range" min="0" max="100" value="50" /> |
Import
@import '@webtui/css/components/range.css';
Usage
<input type="range" />
Examples
Basic Range
| 1 |
|
| 2 |
<input type="range" min="0" max="100" value="25" /> |
| 3 |
<input type="range" min="0" max="100" value="50" /> |
| 4 |
<input type="range" min="0" max="100" value="75" /> |
| 5 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
|
Track Styles
| 1 |
|
| 2 |
<input type="range" min="0" max="100" value="40" /> |
| 3 |
<input type="range" bar-="thick" min="0" max="100" value="50" /> |
| 4 |
<input type="range" bar-="line" min="0" max="100" value="60" /> |
| 5 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
|
With Labels
| 1 |
|
| 2 |
<label> |
| 3 |
Volume |
| 4 |
<input type="range" min="0" max="100" value="25" /> |
| 5 |
</label> |
| 6 |
<label> |
| 7 |
Brightness |
| 8 |
<input type="range" min="0" max="100" value="75" /> |
| 9 |
</label> |
| 10 |
<label> |
| 11 |
Warmth |
| 12 |
<input type="range" min="0" max="100" value="50" disabled /> |
| 13 |
</label> |
| 14 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
|
Disabled State
| 1 |
|
| 2 |
<label> |
| 3 |
Enabled |
| 4 |
<input type="range" min="0" max="100" value="50" /> |
| 5 |
</label> |
| 6 |
|
| 7 |
<label> |
| 8 |
Disabled |
| 9 |
<input type="range" min="0" max="100" value="30" disabled /> |
| 10 |
</label> |
| 11 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
Reference
Properties
Use CSS custom properties to customize the range appearance
--range-track-color: Color of the slider track--range-thumb-color: Default color of the slider thumb--range-thumb-color-focus: Color of the slider thumb when focused or active--range-track-height: Height of the track
#my-range {
--range-track-color: var(--background2);
--range-thumb-color: var(--foreground2);
--range-thumb-color-focus: var(--foreground0);
}
Extending
To extend the Range stylesheet, define a CSS rule on the components layer
@layer components {
input[type='range'] {
&[variant-='accent'] {
--range-track-color: var(--accent-color);
--range-thumb-color: var(--accent-foreground);
}
/* ... */
}
}
Scope
- All
<input type="range"> elements
input[type='range'] {
/* ... */
}