UI-Range

CSS-Only Custom & Flexible<input type='range'>

👉 Demos: Codepen 👈

---

A CSS-only component which is designed to work along-side the corresponding markup (examples below). This code here is designed to bring customizabiilty to the maximum for the range input element, extending the very basic <input type='range'> native browser component, infusing it with extra features.

Features:

• Extensive CSS variables usage = Much easier customization:
  • Track height, color, gradient
  • Progress color/gradient
  • Progress shadow
  • Thumb size, color & shadow
  • Ticks (per step) height, color, width, position, offset
  • Ticks count limit (30)
  • Ticks skipping (Prints tick every N tick)
  • Value text color when "active" (component hover)
  • Value background color
  • Cursor for hover & grabbing
  • RTL (right-to-left) support via dir=rtl attribute
• Value is printed by default at all times
• Value supports prefix and/or suffix
• Minimum & maximum values are printed at the edges
• Ticks are printed on each step, or every N step
• Ticks automatically hidden if too many (too dense to be helpful)

In addition to all the root variables, a helper variable --is-left-most exists on the <input> element itself, which can be helpful if it is desirable to visually distingush between left/right thumbs of a multi-range slider.

⚠️--min & --max variables' values should be kept as integers (not floating-point) because a CSS trick using counters is used to print the values in a pseudo-element, and it only works for integers.

---

I must say that CSS is not yet good enough to make this code much cleaner. I had to rely on repeating the input's attributes in its parent node, as CSS style variables, because CSS is currently unable to extrapolate attibutes as variables.

Even if the above was possible, still, it would require passing varables from one sibling to another, or to a parent.

The <input> element has all the information needed, but the oninput event is needed to keep things in-sync for the CSS to be "aware".

--text-value is needed along-side --value due to CSS inability to cast variables types. Technically it is possible with new Houdini, but it's not yet a norm in modern-browsers.

---

I intentionallyl did not use the native <progress> element, since it wasn't flexible enough (especially not cross-browser). Using <div class='range-slider__progress'></div> instead.

Install:

npm i @yaireo/ui-range

Usage:

Import CSS file via JS

1import '@yaireo/ui-range'

Or via CSS @import

1@import '@yaireo/ui-range'

For the SCSS version, use this path:

@yaireo/ui-range/ui-range.scss

Markup Example (single range):

1<div class="range-slider" style='--min:0; --max:100; --value:75; --text-value:"75"; --suffix:"%"'>
2  <input type="range" min="0" max="100" value="75" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
3  <output></output>
4  <div class='range-slider__progress'></div>
5</div>

Markup Example (double range):

1<div class="range-slider flat" data-ticks-position='top' style='--min:-500; --max:500; --prefix:"$" --value-a:-220; --value-b:400; --text-value-a:"-220"; --text-value-b:"400";'>
2  <input type="range" min="-500" max="500" value="-220" oninput="this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))">
3  <output></output>
4  <input type="range" min="-500" max="500" value="400" oninput="this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))">
5  <output></output>
6  <div class='range-slider__progress'></div>
7</div>