@ou-imdt/css/src/utility/input-range.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root {
  /* Input:Range */
  --range-border: none;
  --range-width: auto;
  --range-track-height: 0.5rem;
  --range-track-radius: 0.5rem;
  --range-track-color: #0b55a8;

  --range-thumb-height: 1.2rem;
  --range-thumb-width: 1.2rem;
  --range-thumb-radius: 100%;
  --range-thumb-color: var(--bg1);
  --range-thumb-border: 0.15rem solid #0b55a8;
  --range-thumb-focus-boxshadow: 0 0 0 0.1rem rgb(0 33 88 / 50%);
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"].range {
  appearance: none;
  background: transparent;
  cursor: pointer;
  border: var(--range-border);
  width: var(--range-width);
  vertical-align: middle;
}

/* Removes default focus */

/***** Chrome, Safari, Opera and Edge Chromium styles *****/
/* slider track */
input[type="range"].range::-webkit-slider-runnable-track {
  background-color: var(--range-track-color);
  border-radius: var(--range-track-radius);
  height: var(--range-track-height);
}

/* slider thumb */
input[type="range"].range::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  /* margin-top: -12px; */
  /* Centers thumb on the track */
  transform: translateY(-50%);
  margin-top: calc((var(--range-track-height)/2));
  border-radius: var(--range-thumb-radius);
  border: var(--range-thumb-border);

  /*custom styles*/
  background-color: var(--range-thumb-color);
  height: var(--range-thumb-height);
  width: var(--range-thumb-width)
}

input[type="range"].range:focus::-webkit-slider-thumb {
  box-shadow: var(--range-thumb-focus-boxshadow);
}

/******** Firefox styles ********/
/* slider track */
input[type="range"].range::-moz-range-track {
  background-color: var(--range-track-color);
  border-radius: var(--range-track-radius);
  height: var(--range-track-height);
}

/* slider thumb */
input[type="range"].range::-moz-range-thumb {
  border: var(--range-thumb-border);
  /*Removes extra border that FF applies*/
  border-radius: var(--range-thumb-radius);
  /*Removes default border-radius that FF applies*/

  /*custom styles*/
  background-color: var(--range-thumb-color);
  height: calc((var(--range-thumb-height)/4)*3);
  width: calc((var(--range-thumb-width)/4)*3);
  /* FF renders the thumb bigger for some reason, above reduces size to be more consistent */
}

input[type="range"].range:focus::-moz-range-thumb {
  box-shadow: var(--range-thumb-focus-boxshadow);
}

/* TODO: Fix focus visible style vs mouse focus style */