body { padding: 30px; } input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; padding: 8px 5px; background: transparent; transition: border 0.2s linear, box-shadow 0.2s linear; /*required for proper track sizing in FF*/ width: 100%; } input[type=range]:active { border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; background: #5bc0de; border: none; border-radius: 10px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; display: block; height: 16px; width: 16px; border-radius: 50%; border: 1px solid #ddd; background: #fafafa; cursor: pointer; margin-top: -5px; } input[type=range]::-webkit-slider-thumb:hover { background-position: 50% 50%; } input[type=range]:focus::-webkit-slider-runnable-track { background: #5bc0de; } input[type=range]::-moz-range-track { width: 100%; height: 5px; background: #5bc0de; border: none; border-radius: 3px; } input[type=range]::-moz-range-thumb { border: none; display: block; height: 16px; width: 16px; border-radius: 50%; border: 1px solid #ddd; background: #fafafa; cursor: pointer; margin-top: -5px; } /*hide the outline behind the border*/ input[type=range]:-moz-focusring { outline: 1px solid white; outline-offset: -1px; } input[type=range]::-ms-track { width: 100%; height: 5px; background: transparent; /* Hides the slider so custom styles can be added */ border-color: transparent; border-width: 7px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #5bc0de; border-radius: 10px; } input[type=range]::-ms-fill-upper { background: #5bc0de; border-radius: 10px; } input[type=range]::-ms-thumb { border: none; height: 16px; width: 16px; border-radius: 50%; border: 1px solid #ddd; background: #fafafa; }
<input type="range" name="my-range" title="custom input range" />