CSS Only Customizable Range Slider – UI-Range

Preview:

Description:

UI-Range is a CSS library to create range sliders with ticks, min/max values, and floating labels from regular range inputs.

Easy to customize via CSS variables.

How to use it:

1. Install & download the package.

# NPM
$ npm i @yaireo/ui-range --save

2. Import the UI-Range into your project.

// via JavaScript
import '@yaireo/ui-range'
// or
@yaireo/ui-range/ui-range.scss
// via CSS
@import '@yaireo/ui-range'
// for browser
<link rel="stylesheet" href="ui-range.css" />

3. Create a custom range slider with the following CSS variables:

// defaults
--primaryColor: #0366D6;
--value-active-color: white;
--value-background: white;
--value-font: 700 12px/1 Arial;
--progress-color: #EEE;
--progress-shadow: 2px 2px 4px rgba(0,0,0, .1) inset;
--fill-color: var(--primaryColor);
--thumb-size: 16px;
--track-height: calc(var(--thumb-size)/2);
--thumb-shadow: 0 0 3px rgba(0,0,0,.2);
--ticks-thickness: 1px;
--ticks-height: 5px;
--ticks-color: silver;
--step: 1;
--ticks-count: (var(--max) - var(--min)) / var(--step);
--maxTicksAllowed: 30;
--too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
--x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) ); // manipulate the number of steps if too many ticks exist, so there would only be 2
--tickInterval: 100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
--tickIntervalPerc: calc((100% - var(--thumb-size))/( (var(--max) - var(--min)) / var(--x-step) ) * var(--tickEvery, 1));
--completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);
--LTR: 1;

<div class="range" style='--min:0; --max:1000; --value:170; --text-value:"170"; --thumb-size: 22px; --track-height: calc(var(--thumb-size)/3);'>
  <input type="range" min="0" max="1000" value="170" oninput="this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))">
  <output></output>
  <div class='range__progress'></div>
</div>