@fylgja/form-extend/range.css

The Fylgja form-extend component

:where(input[type=range]) {
  --range-value: 0;
  --track-dir: to right;
  --track-size: 0.8ex;
  --track-radius: 0.3rem;
  --track-color: color-mix(in srgb, currentcolor 24%, canvas);
  --track-fill: var(--form-active-color, currentcolor);
  --thumb-size-y: 2.5em;
  --thumb-size-x: 1em;
  --thumb-radius: 1em;
  --thumb-stroke: var(--root-bg);
  --thumb-stroke-size: 3px;
  --thumb-color: var(--form-active-color, currentcolor);
  display: block;
  appearance: none;
  min-block-size: var(--thumb-size-y);
  inline-size: 100%;
  margin: 0;
  background: none;
  cursor: grab;
}
:where(input[type=range]):active {
  cursor: grabbing;
}
:where(input[type=range]):dir(rtl) {
  --track-dir: to left;
}
:where(input[type=range])::-webkit-slider-runnable-track {
  --_val: calc(var(--range-value) * 100% / 100);
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-color) linear-gradient(var(--track-dir), var(--track-fill) var(--_val), var(--track-color) var(--_val));
}
:where(input[type=range])::-moz-range-track {
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-color);
}
:where(input[type=range])::-webkit-slider-thumb {
  appearance: none;
  block-size: var(--thumb-size-y);
  inline-size: var(--thumb-size-x);
  box-shadow: var(--thumb-shadow);
  border-radius: var(--thumb-radius);
  border: solid var(--thumb-stroke);
  border-width: var(--thumb-stroke-size);
  background-color: var(--thumb-color);
  margin-block-start: var(--thumb-offset, calc(0.5 * (var(--track-size) - var(--thumb-size-y))));
}
:where(input[type=range])::-moz-range-thumb {
  appearance: none;
  block-size: var(--thumb-size-y);
  inline-size: var(--thumb-size-x);
  box-shadow: var(--thumb-shadow);
  border-radius: var(--thumb-radius);
  border: solid var(--thumb-stroke);
  border-width: var(--thumb-stroke-size);
  background-color: var(--thumb-color);
  box-sizing: border-box;
}