.range {
  flex-grow: 1;
}

input[type='range'].range__input {
  --track-color: #d4d2d2;
  --track-fill-color: #157cfc;
  --thumb-color: #212121;
  --thumb-hover-color: #000;
  --thumb-active-color: #000;

  box-sizing: border-box;

  margin: 0;
  padding: 0;
  width: 100%;
  height: 40px;

  line-height: 1;
}

input[type='range'].range__input:focus {
  outline: color(#157cfc a(50%)) 2px solid;
  outline-offset: 1px;
}

input[type='range'].range__input::-moz-range-track {
  background: var(--track-color);
}

input[type='range'].range__input::-moz-range-progress {
  background: var(--track-fill-color);
}

input[type='range'].range__input::-moz-range-thumb {
  border: none;
  background: var(--thumb-color);
  box-shadow: none;
}

input[type='range'].range__input::-moz-range-thumb:hover,
input[type='range'].range__input::-moz-range-thumb:focus {
  background: var(--thumb-hover-color);
}

input[type='range'].range__input::-moz-range-thumb:active {
  background: var(--thumb-active-color);
}

input[type='range'].range__input::-ms-track {
  background: var(--track-color);
}

input[type='range'].range__input::-ms-fill-lower {
  background: var(--track-fill-color);
}

input[type='range'].range__input::-ms-thumb {
  background: var(--thumb-color);
}

input[type='range'].range__input:focus::-ms-thumb {
  background: var(--thumb-hover-color);
}

input[type='range'].range__input::-ms-thumb:active {
  background: var(--thumb-active-color);
}