Slider
Single value or range slider with label and live value.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="px-slider" data-format="{v}%">
<div class="px-slider__head"><label for="sl-1">Opacity</label><output class="px-slider__value" for="sl-1">60%</output></div>
<div class="px-slider__rail"><span class="px-slider__fill"></span><input id="sl-1" type="range" min="0" max="100" value="60"></div>
</div>Usage
- Use for approximate values. For exact numbers add an Input.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Range
Two inputs share one rail.
<div class="px-slider" data-format="${v}">
<div class="px-slider__head"><span id="sl-2">Price range</span><output class="px-slider__value"></output></div>
<div class="px-slider__rail"><span class="px-slider__fill"></span><input type="range" min="0" max="1000" value="200" aria-label="Minimum price"><input type="range" min="0" max="1000" value="750" aria-label="Maximum price"></div>
</div>Disabled
<div class="px-slider"><div class="px-slider__head"><span>Volume</span><output class="px-slider__value"></output></div><div class="px-slider__rail"><span class="px-slider__fill"></span><input type="range" value="30" disabled aria-label="Volume"></div></div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-slider | class | Host; data-format="{v}%" formats the output. |
px-slider__rail · __fill | class | Track and fill (set by JS). |
input[type=range] | element | One for Single, two for Range. |
Figma properties
Slider16 variants · page “Sliders”Open
Single value or range slider with label and live value. Thumbs are 20px (44px touch target in code via padding). RTL fills from the right; use arrow keys ±1 step, Page Up/Down ±10%. role=slider with a…
| Property | Type | Values |
|---|---|---|
| Label | Text | “Price range” |
| Show label | Boolean | — |
| Type | Variant | Single Range |
| State | Variant | Active Hover Focused Disabled |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-slider-track-height | spacing-8 | 8px |
--px-slider-thumb-size | spacing-20 | 20px |
Accessibility
- Native range: arrow keys ±1, Page Up/Down ±10%.
- Each thumb needs a label.