.range-slider {
  --fill-color: var(--accent-color);
  --thumb-size: 1.25rem;
  --min: attr(data-min, type(<number>));
  --max: attr(data-max, type(<number>));
  --value-a: clamp(var(--min), var(--value, 0), var(--max));
  --value-b: var(--value, 0);
  --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);
  --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);
  --ca: min(var(--completed-a), var(--completed-b));
  --cb: max(var(--completed-a), var(--completed-b));
  box-sizing: content-box;
  display: inline-block;
  width: 100%;
  height: var(--thumb-size);
  margin-block-end: 2rem;
  position: relative;
  z-index: 1
}

.range-slider__progress {
  --start-end: 0.75rem;
  --clip-end: calc(100% - (var(--cb)) * 1%);
  --clip-start: calc(var(--ca) * 1%);
  --clip: inset(-1.25rem var(--clip-end) -1.25rem var(--clip-start));
  position: absolute;
  left: var(--start-end);
  right: var(--start-end);
  top: 0.5rem;
  height: 0.375rem;
  background: var(--color-6);
  pointer-events: none;
  z-index: -1;
  border-radius: 0.25rem;
}

.range-slider:has(:focus-within) .range-slider__progress {
  background: var(--color-9);
}

.range-slider__progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  clip-path: var(--clip);
  top: 0;
  bottom: 0;
  background: var(--fill-color, black);
  z-index: 1;
  border-radius: inherit
}

.range-slider__progress::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit
}

.range-slider>input[type=range] {
  width: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none
}

.range-slider>input[type=range]:not(:only-of-type) {
  pointer-events: none
}

.range-slider>input[type=range]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: auto;
  transition: .1s
}

.range-slider>input[type=range]::-moz-range-thumb {
  appearance: none;
  pointer-events: auto;
  transition: .1s
}

.range-slider>input[type=range]::-webkit-slider-runnable-track {
  width: inherit;
  background: inherit;
  transition: inherit;
}

.range-slider>input[type=range]::-moz-range-track {
  width: inherit;
  background: inherit;
  transition: inherit;
}

.range-slider>input[type=range]::-ms-thumb {
  appearance: none;
  pointer-events: auto;
  transition: .1s
}

.range-slider>input[type=range]::-ms-track {
  width: inherit;
  background: inherit;
  transition: inherit
}

.range-slider>input[type=range]:active {
  cursor: grabbing;
  z-index: 2
}

.range-slider>input[type=range]:nth-of-type(1) {
  --is-left-most: clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)
}

.range-slider>input[type=range]:nth-of-type(2) {
  --is-left-most: clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)
}

.range-slider>input[type=range]:nth-of-type(2)+output {
  --value: var(--value-b)
}

.range-slider>input[type=range]:only-of-type~.range-slider__progress {
  --clip-start: 0
}

.range-slider output {
  display: block;
  margin: 1.5rem 0 0 0;
}