Come personalizzare un input range con CSS

HTML

<div class="demo-content">
	<div class="c4l-range">
		<input type="range" name="rate" id="rate" min="1" max="5" />
	</div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/come-personalizzare-un-input-range-con-css/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/* Required snippet style */
.c4l-range input[type="range"] {
    -webkit-appearance: none;
    background-color: #ddd;
    height:30px;
    width: 250px;
}
.c4l-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #666;
    height: 10px;
    opacity: 0.6;
    width: 10px;
}
.c4l-range input[type="range"]::-moz-range-thumb {
    background-color: red;
    border-radius: 34.7px;
    border: none;
    height: 38px;
    opacity: 0.6;
    width: 20px;
}
.c4l-range input[type="range"]::-moz-range-track {
    background: #ddd;
    border: none;
}
.c4l-range input[type=range] + .thumb {
    display: none;
}

/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem;  text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }