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">

With Value Label

Slider showing current value.

html
75%
50% 
<div class="uc-flex uc-justify-between uc-items-center uc-mb-3">
  <label class="uc-text-sm uc-font-medium">Volume</label>
  <span class="uc-text-sm uc-text-fg-disabled">75%</span>
</div>
<input type="range" min="0" max="100" value="75">

With Steps

Slider snapping to discrete values.

html
20°C
16°C 23°C 30°C 
<div class="uc-flex uc-justify-between uc-items-center uc-mb-3">
  <label class="uc-text-sm uc-font-medium">Temperature</label>
  <span class="uc-text-sm uc-font-mono uc-text-fg-disabled">20°C</span>
</div>
<input type="range" min="16" max="30" step="1" value="20">
<div class="uc-flex uc-justify-between uc-text-xs uc-text-fg-disabled uc-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>

Settings Example

Sliders in an audio settings context.

Audio Settings

Configure audio output.

80%
60%
45%

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"