Slider
Range value selection. Styles the native range input cross-browser for track and thumb.
Default
Base
| Class | Description |
|---|---|
.ui-slider | Base class |
Size
| Class | Value |
|---|---|
.ui-slider--sm | sm |
.ui-slider--lg | lg |
Color
| Class | Value |
|---|---|
.ui-slider--success | success |
.ui-slider--warning | warning |
.ui-slider--danger | danger |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-slider-height |
var(--ui-row-2) |
Overall height |
--ui-slider-track-height |
var(--ui-unit) |
Track height |
--ui-slider-track-bg |
var(--ui-color-bg-inset) |
Track background |
--ui-slider-track-fill |
var(--ui-color-primary) |
Track fill |
--ui-slider-track-radius |
var(--ui-radius-full) |
Track corner radius |
--ui-slider-thumb-size |
calc(var(--ui-unit) * 2.5) |
Thumb control size |
--ui-slider-thumb-bg |
var(--ui-color-bg) |
Thumb background |
--ui-slider-thumb-border-color |
var(--ui-color-primary) |
Thumb control border color |
--ui-slider-thumb-border-width |
var(--ui-border-width-md) |
Thumb control border thickness |
--ui-slider-thumb-radius |
var(--ui-radius-full) |
Thumb corner radius |
--ui-slider-thumb-shadow |
var(--ui-slider-thumb-shadow) |
Thumb control box shadow |
--ui-slider-focus-ring |
var(--ui-color-focus) |
Focus ring |
--ui-slider-fill-pct |
50% |
Fill percentage (set via JS for Webkit track fill) |
--ui-slider-height-sm |
calc(var(--ui-row) * 1.5) |
Overall height at small size |
--ui-slider-height-lg |
calc(var(--ui-row) * 2.5) |
Overall height at large size |
Sizes
<input class="ui-slider ui-slider--sm" type="range" min="0" max="100" value="30"></input>
<input class="ui-slider" type="range" min="0" max="100" value="50"></input>
<input class="ui-slider ui-slider--lg" type="range" min="0" max="100" value="70"></input>Colors
<input class="ui-slider" type="range" min="0" max="100" value="50"></input>
<input class="ui-slider ui-slider--success" type="range" min="0" max="100" value="80"></input>
<input class="ui-slider ui-slider--warning" type="range" min="0" max="100" value="60"></input>
<input class="ui-slider ui-slider--danger" type="range" min="0" max="100" value="25"></input>Disabled
<input class="ui-slider" type="range" min="0" max="100" value="40" disabled></input>
<input class="ui-slider ui-slider--success" type="range" min="0" max="100" value="70" disabled></input>