UI Interactive Range Input Slider with CSS

UI-Range input component, highly customizable, based on CSS variants. This CSS library is for creating range sliders with hash marks, min/max values, and floating labels from regular range input.

How to make use of it:

1. Install & download the package.

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

2. Import the UI-Range into your undertaking.

// via JavaScript
import '@yaireo/ui-range'
// or

// via CSS
@import '@yaireo/ui-range'

// for browser
<link rel="stylesheet" href="ui-range.css" />

3. Create a customized vary slider with the next 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))">
  <div class='range__progress'></div>

CSS Only Customizable Range Slider, UI Range Plugin/Github

See Demo And Download

Official Website(yairEO): Click Here

This superior jQuery/javascript plugin is developed by yairEO. For extra Advanced usage, please go to the official website.