Beautiful UI-Range input component, highly customisable, based on CSS variables. including a floating output value, min & max values on the sides & ticks according to the steps
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.
dir=rtl
attributeIn 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.
npm i @yaireo/ui-range
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
<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>
<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 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 |