Input Range in Android Lollipop


#1

Hi all, i make a new CSS file for the Input range, to has Android Lollipop style.

iOS & Android styles.

/**

  • Range for Android

*/

.platform-android .range input {
height: 30px;
}

.platform-android .range input::-webkit-slider-thumb {
width: 20px;
height: 20px;
box-shadow: none;
}

.platform-android .range input::-webkit-slider-thumb:before {
top: 9px;
}

.platform-android .range input::-webkit-slider-thumb:after {
padding: 25px;
}

.platform-android .range.range-light input::-webkit-slider-thumb {
background: #ddd; }
.platform-android .range.range-stable input::-webkit-slider-thumb {
background: #b2b2b2; }
.platform-android .range.range-positive input::-webkit-slider-thumb {
background: #387ef5; }
.platform-android .range.range-calm input::-webkit-slider-thumb {
background: #11c1f3; }
.platform-android .range.range-balanced input::-webkit-slider-thumb {
background: #33cd5f; }
.platform-android .range.range-assertive input::-webkit-slider-thumb {
background: #ef473a; }
.platform-android .range.range-energized input::-webkit-slider-thumb {
background: #ffc900; }
.platform-android .range.range-royal input::-webkit-slider-thumb {
background: #886aea; }
.platform-android .range.range-dark input::-webkit-slider-thumb {
background: #444; }