Skip to main content

Slider

Draggable range input for selecting a numeric value.

Selectors

.slider
Range input styled as macOS-style slider with thumb and track.

Default

HTML 
<input type="range" min="0" max="100" value="33" class="slider w-full max-w-sm" aria-label="Value" />

With Label

HTML 
<label class="max-w-sm space-y-3">
  <div class="flex items-center justify-between">
    <span>Temperature</span>
    <span class="text-sm text-tertiary-foreground">70</span>
  </div>
  <input type="range" min="0" max="100" value="70" step="1" class="slider w-full" />
</label>

With Ticks

HTML 
<label class="max-w-sm space-y-3">
  <div class="flex items-center justify-between">
    <span>Volume</span>
    <span class="text-sm text-tertiary-foreground">50%</span>
  </div>
  <input type="range" min="0" max="100" value="50" step="25" class="slider w-full" />
  <div class="flex justify-between text-xs text-tertiary-foreground">
    <span>0</span>
    <span>25</span>
    <span>50</span>
    <span>75</span>
    <span>100</span>
  </div>
</label>

Disabled

HTML 
<input type="range" min="0" max="100" value="50" class="slider w-full max-w-sm" disabled aria-label="Disabled slider" />

Usage

Include the slider JS to enable the track fill effect. Without it, the filled portion of the track won't update as the slider moves.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Accessibility

Always pair a slider with a <label> or use aria-label so screen readers can identify its purpose. Native <input type="range"> exposes value, min, and max to assistive technology automatically.

<!-- With label element -->
<label for="vol">Volume</label>
<input id="vol" type="range" class="slider" />

<!-- With aria-label -->
<input type="range" aria-label="Volume" class="slider" />

Keyboard: use arrow keys to adjust value by step, Home/End to jump to min/max.