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

import '@yaireo/ui-range'

Or via CSS @import

@import '@yaireo/ui-range'

For the SCSS version, use this path:

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

Markup Example (single range):

<div class="range-slider" style='--min:0; --max:100; --value:75; --text-value:"75"; --suffix:"%"'>
  <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))">
  <output></output>
  <div class='range-slider__progress'></div>
</div>

Markup Example (double range):

<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";'>
  <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))">
  <output></output>
  <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))">
  <output></output>
  <div class='range-slider__progress'></div>
</div>

CSS Variables

CSS Variable	Default	Description
--thumb-size	`22px`	The thumb arear which is used for grabbing the slider and moving
--value-active-color	`white`	value text color when the slider is active/hovered
--value-background	`transparent`
--value-background-hover	`--primary-color`
--primary-color	`#0366d6`	The main color of the component
--value-offset-y	`--ticks-gap`	Vertical distance of the current numerical value from the slider
--track-height	`--thumb-size / 2`
--progress-radius	`20px`	Border radius of the slider
--fill-color	`--primary-color`
--show-min-max		`none` to hide the min/max values at the edges
--ticks-thickness	`1px`	How wide each tick line is
--ticks-height	`5px`	How tall each tick line is
--ticks-gap	`var(--ticks-height,0)`	Vertical gap between the ticks and the slider
--min-max-x-offset	`10%`	Horizontal offset of min/max values (more to the inside or outside)
--min-max-opacity	`0.5`
--ticks-color	`silver`

eduardopintor/ui-range