input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: var(--color-grey-5);
  border-radius: 4px;
  background-image: linear-gradient(var(--color-brand-1), var(--color-brand-1));
  background-repeat: no-repeat;
  margin-bottom: 60px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 23px;
  width: 23px;
  border: 6px solid var(--color-brand-1);
  border-radius: 50%;
  background: var(--color-grey-9);
  cursor: pointer;
  box-shadow: 0 0 2px 0 var(--color-grey-3);
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 23px;
  width: 23px;
  border: 6px solid var(--color-brand-1);
  border-radius: 50%;
  background: var(--color-grey-9);
  cursor: pointer;
  box-shadow: 0 0 2px 0 var(--color-grey-3);
}

input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  height: 23px;
  width: 23px;
  border: 6px solid var(--color-brand-1);
  border-radius: 50%;
  background: var(--color-grey-9);
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 var(--color-grey-3);
}