3 replies

Style range slider

I'm styling a single-thumb <input type="range"> slider using SCSS. A lot of my styles are duplicated across ::-webkit-slider-thumb and ::-moz-range-thumb, so I tried combining them using a comma selector—but then the styles stopped applying. Is that a WebKit vs. Mozilla thing?

Also, I’m struggling to add proper :hover and :focus effects to both the slider thumb and the filled track (that is made possible with the border-image trick).

Here’s the React component:

<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>

<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>

<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>

<input
  className="slider"
  type="range"
  min="1"
  max="30"
  step="1"
  value={simulationResultCount}
  onInput={(e) =>
    onSimulationResultCountClicked(Number(e.target.value))
  }
/>

And here are the SCSS styles:

.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}

.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}

.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}

.slider {
  width: 207px;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
}

// WebKit thumb
.slider[type="range" i]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  -webkit-appearance: none;
  appearance: none;
}

// Firefox thumb
.slider[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: $primary-color;
  border-image: linear-gradient(90deg, $primary-color 50%, white 0)
    0 1 / calc(50% - 2px) 100vw / 0 100vw;
  appearance: none;
}

Style range slider

Similar Threads

Similar Threads

Similar Threads