Customize CSS input[range]

by Julien Roche

HTML

<input class="range" type="range" min="0" max="100" value="50" step="1" />

CSS

body {
  margin: 1rem;
}

:root {
  --greenLightColor: #48a999;
  --greenNormalColor: #00796b;
  --greenDarkColor: #004c40;
}

.range {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: var(--greenLightColor);
  cursor: pointer;
  height: 3px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--greenDarkColor);
  border: 1px solid var(--greenDarkColor);
  border-radius: 20px;
  box-shadow: 0 0 10px 1px grey;
  height: 20px;
  width: 20px;
}

.range:focus {
  outline: none;
}

.range:hover::-webkit-slider-thumb {
  background-color: var(--greenNormalColor);
  border: 1px solid var(--greenNormalColor);
  box-shadow: 0 0 10px 5px grey;
}

Babel + JSX

// https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
// http://danielstern.ca/range.css/