Fluid Range Slider Input With JS And CSS3

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) + "%";
  }
}