Simple Flat Html5 and CSS3 Range Slider

Category: CSS & CSS3 , Form | July 19, 2014
Author: alexsafayan
Views Total: 7,747
Official Page: Go to website
Last Update: July 19, 2014
License: MIT

Preview:

Simple Flat Html5 and CSS3 Range Slider

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;
}

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)

    Reply

Leave a Reply