Author: | Nour Abusoud |
---|---|
Views Total: | 5,601 views |
Official Page: | Go to website |
Last Update: | January 11, 2018 |
License: | MIT |
Preview:

Description:
A JavaScript/CSS based slider control that converts the normal range input into a fancy fluid range slider.
How to use it:
Create a normal range input with a label element as these:
<div class="slider-wrapper"> <input id="range-slider" class="fluid-slider" type="range" value="80" min="0" max="100"> <span id="range-label" class="range-label"></span> </div>
The CSS to override the default styles of the range slider & track elements.
.fluid-slider { -webkit-appearance: none; width: 300px; height: 25px; background: #c20042; border-radius: 2px; margin: 0; position: relative; } .fluid-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border-radius: 0; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; background: #fff; opacity: 0.65; border: 4px solid #c20042; position: relative; transition: all ease-in-out 0.05s; } .fluid-slider::-moz-range-thumb { -moz-appearance: none; appearance: none; border-radius: 0; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; background: #fff; opacity: 0.65; border: 4px solid #c20042; position: relative; transition: all ease-in-out 0.05s; } .fluid-slider:focus { outline: none; } .fluid-slider:active::-webkit-slider-thumb { background: transparent; } .fluid-slider:active::-moz-range-thumb { background: transparent; } .fluid-slider:active + .range-label { visibility: visible; opacity: 1; top: -75px; } .fluid-slider:before, .fluid-slider::after { position: absolute; content: ''; width: 40px; padding: 0.5em; background: #d0d0d0; top: 50%; transform: translateY(-50%); box-sizing: border-box; text-align: center; font-weight: bold; border-radius: 2px; } .fluid-slider:before { left: -50px; content: attr(min); } .fluid-slider:after { right: -50px; content: attr(max); } .range-label { position: relative; display: block; width: 40px; height: 40px; top: -65px; visibility: hidden; opacity: 0; background: #fff; border-radius: 50%; line-height: 30px; text-align: center; font-weight: bold; font-size: 0.8em; transform: translateX(-50%); box-sizing: border-box; border: 6px solid #c20042; left: attr(value)20; transition: all ease-in .05s; z-index: -1; } .range-label:after { position: absolute; content: ''; top: 33px; left: 50%; transform: translateX(-50%); width: 10px; height: 8px; background-repeat: no-repeat; background-image: radial-gradient(circle, white 50%, transparent 50%), radial-gradient(circle, white 50%, transparent 50%), linear-gradient(#c20042, #c20042); background-size: 180% 100%, 180% 100%, 100% 100%; background-position: 150% 0%, -50% 0%, 100% 100%; } ::-moz-range-track { background: #c20042; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; }
The JavaScript to update the values displayed in the track when sliding.
var rangeSlider = document.getElementById("range-slider"); var rangeLabel = document.getElementById("range-label"); rangeSlider.addEventListener("input", showSliderValue, false); function showSliderValue() { rangeLabel.innerHTML = rangeSlider.value; var labelPosition = (rangeSlider.value /rangeSlider.max); if(rangeSlider.value === rangeSlider.min) { rangeLabel.style.left = ((labelPosition * 100) + 2) + "%"; } else if (rangeSlider.value === rangeSlider.max) { rangeLabel.style.left = ((labelPosition * 100) - 2) + "%"; } else { rangeLabel.style.left = (labelPosition * 100) + "%"; } }