Author: | alexsafayan |
---|---|
Views Total: | 14,096 views |
Official Page: | Go to website |
Last Update: | July 19, 2014 |
License: | MIT |
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; }
your slider does not color the progress of the tracker (as you show it on your screenshot)