/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */ /********** Range Input Styles **********/ /* Range Reset */ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera and Edge Chromium styles *****/ /* slider track */ input[type="range"]::-webkit-slider-runnable-track { height: 5px; width: 70px; border: 1px solid #1a2445; border-right-color: #3a506b; border-bottom-color: #3a506b; background-color: #2e2e27; background-repeat: repeat-x; } /* slider thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ /* custom styles */ height: 11px; margin-top: -4px; width: 5px; background: #640000; border: 1px solid #812b25; border-right-color: #21110f; border-bottom-color: #21110f; } input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #21110f; border-right-color: #812b25; border-bottom-color: #812b25; } /******** Firefox styles ********/ /* slider track */ input[type="range"]::-moz-range-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ /* custom styles */ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }