/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ .progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; color: #5764c6; height: .4rem; width: 100%; } .progress::-webkit-progress-bar { background: #efefef; border-radius: .2rem; } .progress::-webkit-progress-value { background: #5764c6; border-radius: .2rem; } .progress::-moz-progress-bar { background: #5764c6; border-radius: .2rem; } .slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; display: block; height: 2.4rem; width: 100%; } .slider::-webkit-slider-thumb { -webkit-appearance: none; background: #5764c6; border-radius: 50%; height: 1.4rem; margin-top: -.5rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; width: 1.4rem; } .slider::-moz-range-thumb { background: #5764c6; border: 0; border-radius: 50%; height: 1.4rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; width: 1.4rem; } .slider::-ms-thumb { background: #5764c6; border: 0; border-radius: 50%; height: 1.4rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; width: 1.4rem; } .slider:active::-webkit-slider-thumb { -webkit-transform: scale(1.25); transform: scale(1.25); } .slider:active::-moz-range-thumb { transform: scale(1.25); } .slider:active::-ms-thumb { -ms-transform: scale(1.25); transform: scale(1.25); } .slider::-webkit-slider-runnable-track { background: #efefef; border-radius: .2rem; height: .4rem; width: 100%; } .slider::-moz-range-track { background: #efefef; border-radius: .2rem; height: .4rem; width: 100%; } .slider::-ms-track { background: #efefef; border-radius: .2rem; height: .4rem; width: 100%; } .slider::-ms-fill-lower { background: #5764c6; }