Simple Flat Html5 and CSS3 Range Slider

Preview:

Description:

Converts Html5 input type=range into a nice flat styled range slider built on top of pure CSS/CSS3. Created by  AlexSafayan.

How to use it:

Create a standard Html5 range input in your document.

<input type="range" value="20" class="demo">

The CSS to style the range input as a range slider.

input {
  -webkit-appearance: none;
  width: 160px;
  height: 20px;
  margin: 10px 50px;
  background: linear-gradient(to right, #16a085 0%, #16a085 100%);
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: none;
  zoom: 130%;
  display: block;
  margin: auto;
  margin-bottom: 30px;
}

The CSS to style the range slider’s handler.

input::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 20px;
 height: 20px;
 background: #27ae60;
 position: relative;
 z-index: 3;
}

input::-webkit-slider-thumb:after {
 content: " ";
 width: 160px;
 height: 10px;
 position: absolute;
 z-index: 1;
 right: 20px;
 top: 5px;
 background: #2ecc71;
}