input[type=range].moment-range { width: 100%; margin: 13.8px 0; background-color: transparent; -webkit-appearance: none; padding-left: 1%; padding-right: 1%; } input[type=range].moment-range:focus { outline: none; } input[type=range].moment-range::-webkit-slider-runnable-track { background: #3071a9; border: 0.2px solid #010101; border-radius: 1.3px; width: 100%; height: 8.4px; cursor: pointer; } input[type=range].moment-range::-webkit-slider-thumb { margin-top: -14px; width: 16px; height: 36px; background: #ffffff; border: 1px solid #000000; border-radius: 3px; cursor: pointer; -webkit-appearance: none; } input[type=range].moment-range:focus::-webkit-slider-runnable-track { background: #367ebd; } input[type=range].moment-range::-moz-range-track { background: #3071a9; border: 0.2px solid #010101; border-radius: 1.3px; width: 100%; height: 8.4px; cursor: pointer; } input[type=range].moment-range::-moz-range-thumb { width: 16px; height: 36px; background: #ffffff; border: 1px solid #000000; border-radius: 3px; cursor: pointer; } input[type=range].moment-range::-ms-track { background: transparent; border-color: transparent; border-width: 14.8px 0; color: transparent; width: 100%; height: 8.4px; cursor: pointer; } input[type=range].moment-range::-ms-fill-lower { background: #2a6495; border: 0.2px solid #010101; border-radius: 2.6px; } input[type=range].moment-range::-ms-fill-upper { background: #3071a9; border: 0.2px solid #010101; border-radius: 2.6px; } input[type=range].moment-range::-ms-thumb { width: 16px; height: 36px; background: #ffffff; border: 1px solid #000000; border-radius: 3px; cursor: pointer; margin-top: 0px; /*Needed to keep the Edge thumb centred*/ } input[type=range].moment-range:focus::-ms-fill-lower { background: #3071a9; } input[type=range].moment-range:focus::-ms-fill-upper { background: #367ebd; } /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out how to remove the virtical space around the range input in IE*/ @supports (-ms-ime-align:auto) { /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */ input[type=range].moment-range { margin: 0; /*Edge starts the margin from the thumb, not the track as other browsers do*/ } }