Flat slider

Flat slider styles a plain <input type="range"> entirely through CSS custom properties — no widget library needed. Adjust the line, handle and range-fill controls above and copy the generated CSS.

.flat-slider {
  --fs-line-width: 6px;
  --fs-line-background: #f7d2cc;
  --fs-handle-width: 20px;
  --fs-handle-background: #38b11f;
}

.flat-slider::-webkit-slider-runnable-track {
  height: var(--fs-line-width);
  background: var(--fs-line-background);
}

.flat-slider::-webkit-slider-thumb {
  appearance: none;
  width: var(--fs-handle-width);
  height: var(--fs-handle-height);
  background: var(--fs-handle-background);
}

The range fill (the colored portion between the track start and the current value) is painted with a linear-gradient whose stop position is kept in sync with the slider's value via a --fs-fill-percent custom property, updated on every input event.