v1.1.1

Slider

An input where the user selects a value from within a given range.

Default

Basic slider.

html 
<input type="range" min="0" max="100" value="50" aria-label="Value">

With Value Label

Slider showing current value.

html
75%
50% 
<div>
  <div class="vt-flex vt-justify-between vt-items-center vt-mb-3">
    <label class="vt-text-sm vt-font-medium" for="slider-2-1">Volume</label>
    <span id="volume-val" class="vt-text-sm vt-text-foreground-muted">75%</span>
  </div>
  <input type="range" min="0" max="100" value="75" oninput="document.getElementById('volume-val').textContent=this.value+'%'" id="slider-2-1">
</div>
<div>
  <div class="vt-flex vt-justify-between vt-items-center vt-mb-3">
    <label class="vt-text-sm vt-font-medium" for="slider-2-2">Brightness</label>
    <span id="brightness-val" class="vt-text-sm vt-text-foreground-muted">50%</span>
  </div>
  <input type="range" min="0" max="100" value="50" oninput="document.getElementById('brightness-val').textContent=this.value+'%'" id="slider-2-2">
</div>

With Steps

Slider snapping to discrete values.

html
20°C
16°C 23°C 30°C 
<div class="vt-flex vt-justify-between vt-items-center vt-mb-3">
  <label class="vt-text-sm vt-font-medium" for="slider-3-1">Temperature</label>
  <span id="temp-val" class="vt-text-sm vt-font-mono vt-text-foreground-muted">20°C</span>
</div>
<input type="range" min="16" max="30" step="1" value="20" oninput="document.getElementById('temp-val').textContent=this.value+'°C'" id="slider-3-1">
<div class="vt-flex vt-justify-between vt-text-xs vt-text-foreground-muted vt-mt-2">
  <span>16°C</span>
  <span>23°C</span>
  <span>30°C</span>
</div>

Disabled

Slider in disabled state.

html 
<input type="range" min="0" max="100" value="40" disabled="" aria-label="Value">

Settings Example

Sliders in an audio settings context.

Audio Settings

Configure audio output.

80%
60%
45%

Guidelines

Continuous or wide numeric range where feel > precision (volume, price range). Exact numbers → number-input.

75%
Do
Use a slider for ranges where feel matters more than precision.
$1,247
Don't
Don't use a slider when users need to enter an exact value.

API Reference

All CSS classes available for the Slider component.

Class Type Description
input[type="range"] Base Native range input — styled via CSS for track and thumb
min / max Attribute HTML attributes defining the slider range boundaries
step Attribute Defines discrete step increments for the slider value
value Attribute Sets the initial slider value
disabled State HTML attribute — reduced opacity, no interaction

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use input[type="range"] or role="slider" for the slider handle
Label Provide visible label linked via for/id or aria-label
Keyboard Arrow keys adjust value by step, Home/End jump to min/max
Value aria-valuenow, aria-valuemin, aria-valuemax describe the current state
Text Use aria-valuetext for human-readable values, e.g. "50 percent"