Range Slider

About this module

A fully styled `<input type=range>` with a gradient fill and a live numeric readout synced via JavaScript.

Installation

1. 1

   Create the files

   Create `index.html`, `style.css` and (if listed) `script.js` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <div class="mh-range">
     <div class="mh-row"><label for="vol">Volume</label><output id="vol-out" for="vol">50%</output></div>
     <input id="vol" type="range" min="0" max="100" value="50" />
   </div>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const range = document.getElementById("vol");
   const out = document.getElementById("vol-out");
   const sync = () => {
     out.textContent = range.value + "%";
     const pct = ((range.value - range.min) / (range.max - range.min)) * 100;
     range.style.setProperty("--fill", pct + "%");
   };
   range.addEventListener("input", sync);
   sync();