CSS-Only

Range Slider

Native HTML5 range input with data-size support, tick marks, and optional value displays. Works by default, enhances with data attributes.

Example

<label for="volume">Volume</label>
<div class="omni-range">
  <input type="range" id="volume" min="0" max="100" value="50">
</div>

Sizes

Use data-size to adjust track height and thumb dimensions:

Small

Medium (default)

Large

<div class="omni-range" data-size="sm">
  <input type="range" min="0" max="100" value="30">
</div>

<div class="omni-range">
  <input type="range" min="0" max="100" value="50">
</div>

<div class="omni-range" data-size="lg">
  <input type="range" min="0" max="100" value="70">
</div>

With Value Display

Show the current value above the slider using .omni-range-value:

<label for="brightness">Brightness: <output id="brightness-value">50</output>%</label>
<div class="omni-range">
  <input type="range" id="brightness" min="0" max="100" value="50"
         aria-describedby="brightness-value">
</div>

With Min/Max Labels

Add min and max labels using .omni-range-labels:

0°F 100°F 
<label for="temperature">Temperature</label>
<div class="omni-range">
  <input type="range" id="temperature" min="0" max="100" value="72">
  <div class="omni-range-labels">
    <span>0°F</span>
    <span>100°F</span>
  </div>
</div>

With Tick Marks

Add tick marks and labels using .omni-range-ticks:

0 1 2 3 4 5 
<label for="rating">Rating</label>
<div class="omni-range">
  <input type="range" id="rating" min="0" max="5" step="1" value="3">
  <div class="omni-range-ticks">
    <span class="omni-range-tick">0</span>
    <span class="omni-range-tick">1</span>
    <span class="omni-range-tick">2</span>
    <span class="omni-range-tick">3</span>
    <span class="omni-range-tick">4</span>
    <span class="omni-range-tick">5</span>
  </div>
</div>

Vertical Orientation

Use data-orientation="vertical" for vertical sliders:

0 100 
<label for="volume">Volume</label>
<div class="omni-range" data-orientation="vertical">
  <input type="range" id="volume" min="0" max="100" value="60">
  <div class="omni-range-labels">
    <span>0</span>
    <span>100</span>
  </div>
</div>

States

Disabled

<div class="omni-range">
  <input type="range" min="0" max="100" value="40" disabled>
</div>

Dual Range (Tier 2)

Price range or other dual-value scenarios require JavaScript (planned for Tier 2):

$20 $70

Note: Dual range requires JavaScript for full interactivity (Tier 2 component). 

<label>Price Range</label>
<div class="omni-range-dual">
  <div class="omni-range-dual-track">
    <div class="omni-range-track-fill"></div>
  </div>
  <input type="range" min="0" max="100" value="20">
  <input type="range" min="0" max="100" value="70">
  <div class="omni-range-dual-values">
    <span>$20</span>
    <span>$70</span>
  </div>
</div>
<!-- Requires JS for thumb coordination and track fill updates -->

API Reference

Data Attributes

Attribute Values Default Description
data-size sm, md, lg md Track height and thumb size
data-orientation horizontal, vertical horizontal Slider orientation

Classes

Class Element Description
.omni-range Container Required wrapper for range input
.omni-range-value Optional Current value display above slider
.omni-range-labels Optional Min/max labels container
.omni-range-ticks Optional Tick marks container
.omni-range-tick Optional Individual tick mark with label
.omni-range-dual Container (Tier 2) Dual range slider wrapper (requires JS)

Native Input Attributes

Attribute Type Description
min number Minimum value (default: 0)
max number Maximum value (default: 100)
step number Value increment (default: 1)
value number Current value
disabled boolean Disable interaction

CSS Custom Properties

Property Default Description
--omni-variant-track-height 0.5rem (md) Height of slider track
--omni-variant-thumb-size 1.25rem (md) Size of slider thumb
--omni-variant-label-gap var(--omni-space-2) Spacing for labels
--omni-variant-label-font-size var(--omni-text-sm) Font size for labels

Accessibility

  • All range inputs MUST have associated <label> elements with matching for and id attributes
  • Full keyboard navigation support (Arrow keys, Home, End, Page Up, Page Down)
  • Focus visible indicator with primary color ring
  • Disabled state prevents interaction and conveys state visually
  • When displaying current value, use <output> element with aria-describedby on input
  • Respects prefers-reduced-motion to disable thumb animations
  • Use aria-label or aria-labelledby for vertical sliders to clarify orientation
  • Provide meaningful min/max values and appropriate step increments
  • Cross-browser compatible (WebKit and Firefox vendor prefixes included)

Best Practices

  • Always provide visible labels for range inputs
  • Consider showing the current value for better user feedback
  • Use appropriate min, max, and step values for your use case
  • For discrete values (like ratings), use tick marks to show available options
  • Vertical sliders work best for controls like volume or brightness
  • Add min/max labels when the range units aren't obvious
  • Use data-size="lg" for touch-friendly interfaces