Slider

Native <input type="range">. Zero JavaScript, fully styled, keyboard navigable.

Basic

<label for="vol">Volume: <output id="vol-out">50</output>%</label>
<input type="range" id="vol" min="0" max="100" value="50"
       oninput="document.getElementById('vol-out').value=this.value">

With Steps

<label for="rating">Rating: <output id="r-out">3</output>/5</label>
<input type="range" id="rating" min="1" max="5" step="1" value="3"
       oninput="document.getElementById('r-out').value=this.value">

Disabled

<input type="range" value="40" disabled>

Attributes

AttributePurpose
min / maxValue boundaries
stepIncrement size — default 1
valueInitial position
disabledPrevent interaction

Accessibility

  • Always include a visible <label>
  • Use <output> for the live value — it announces to screen readers
  • Keyboard: arrows adjust value, Home/End jump to min/max

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Slider component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.