Simple Flat Html5 and CSS3 Range Slider

Category: CSS & CSS3 , Form | July 19, 2014
Views Total:14,149 views
Official Page:Go to website
Last Update:July 19, 2014


Simple Flat Html5 and CSS3 Range Slider


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;

You Might Be Interested In:

One thought on “Simple Flat Html5 and CSS3 Range Slider

  1. abc

    your slider does not color the progress of the tracker (as you show it on your screenshot)


Leave a Reply