---
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** `` native browser component, infusing it with extra features.
## Features:
* Extensive [CSS variables](https://github.com/yairEO/ui-range/blob/master/ui-range.scss#L2-L34) 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 `` 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](https://stackoverflow.com/a/40179718/104380)
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](https://github.com/w3c/csswg-drafts/issues/4482).
Even if the above was possible, still, it would require passing varables from one sibling to another, or to a parent.
The `` 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](https://developer.mozilla.org/en-US/docs/Web/Houdini), but it's not yet a norm in modern-browsers.
---
I intentionallyl did not use the native `
