Flat Html5 and CSS3 Range Slider

Range Slider is the set of contiguous values that the slider control can represent. 

Paste the following script, where you wish the range to appear on your page.

input {
-webkit-appearance:none; 
width:160px; 
height:20px; 
margin:10px 50px; 
background:-moz-linear-gradient(271deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(128, 128, 128, 1) 100%); 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(192, 192, 192, 1)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(128, 128, 128, 1))); 
background:-webkit-linear-gradient(271deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(128, 128, 128, 1) 100%); 
background:-o-linear-gradient(271deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(128, 128, 128, 1) 100%); 
background:-ms-linear-gradient(271deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(128, 128, 128, 1) 100%); 
background:linear-gradient(179deg, rgba(192, 192, 192, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(128, 128, 128, 1) 100%); /* w3c */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c0c0', endColorstr='#808080', GradientType=0 ); 
background-size:150px 10px; 
background-position:center; 
background-repeat:no-repeat; 
overflow:hidden; 
outline:none; 
zoom:130%; 
display:block; 
margin:auto; 
margin-bottom:30px}
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}
.green::-webkit-slider-thumb{background:#27ae60}
.green::-webkit-slider-thumb:after{background:#2ecc71}
.red::-webkit-slider-thumb{background:#c0392b}
.red::-webkit-slider-thumb:after{background:#e74c3c}
.blue::-webkit-slider-thumb{background:#2980b9}
.blue::-webkit-slider-thumb:after{background:#3498db}
.orange::-webkit-slider-thumb{background:#d35400}
.orange::-webkit-slider-thumb:after{background:#e67e22}
.purple::-webkit-slider-thumb{background:#8e44ad}
.purple::-webkit-slider-thumb:after{background:#9b59b6}
.gray::-webkit-slider-thumb{background:#7f8c8d}
.gray::-webkit-slider-thumb:after{background:#95a5a6}

<b>ability</b><br />
jQuery <input class="green" type="range" value="20" />
HTML <input class="purple" type="range" value="64" />
CSS <input class="red" type="range" value="53" />

If i am. I use to gauge the ability of.

See the Pen Flat Html5 and CSS3 Range Slider by Erna Ayuning Nareswari (@ashavenger) on CodePen.