.range {
  --primaryColor: #5cb85c;
  --value-active-color: white;
  --value-background: white;
  --value-font: 700 12px/1 Arial;
  --progress-color: #aedcae;
  --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) inset;
  --fill-color: var(--primaryColor);
  --thumb-size: 16px;
  --track-height: calc(var(--thumb-size) / 2);
  --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  --ticks-thickness: 1px;
  --ticks-height: 5px;
  --ticks-color: silver;
  --step: 1;
  --ticks-count: (var(--max) - var(--min)) / var(--step);
  --maxTicksAllowed: 30;
  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
  --x-step: Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
  --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
  --tickIntervalPerc: calc(
    (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
      var(--tickEvery, 1)
  );
  --completed: calc(
    (var(--value) - var(--min)) / (var(--max) - var(--min)) * 100
  );
  --LTR: 1;
  display: inline-block;
  width: 25em;
  margin-top: 10px;
  height: Max(var(--track-height), var(--thumb-size));
  background: linear-gradient(
      to right,
      var(--ticks-color) var(--ticks-thickness),
      transparent 1px
    )
    repeat-x;
  background-size: var(--tickIntervalPerc) var(--ticks-height);
  background-position-x: calc(var(--thumb-size) / 2);
  background-position-y: var(--flip-y, bottom);
  position: relative;
  z-index: 1;
  padding-bottom: var(--flip-y, var(--ticks-height));
  padding-top: calc(var(--flip-y) * var(--ticks-height));
  margin-bottom: 20px;
}
[dir="rtl"] .range {
  --LTR: -1;
}
.range[data-ticks-position="top"] {
  --flip-y: 1;
}
.range::before,
.range::after {
  --offset: calc(var(--thumb-size) / 2);
  content: counter(x);
  display: var(--show-min-max, block);
  font: 12px Arial;
  position: absolute;
  bottom: var(--flip-y, -2.5ch);
  top: calc(-2.5ch * var(--flip-y));
  opacity: var(--min-max-opacity, 0.5);
  pointer-events: none;
}
.range::before {
  counter-reset: x var(--min);
  left: var(--offset);
  transform: translateX(calc(-50% * var(--LTR)));
}
[dir="rtl"] .range::before {
  left: auto;
  right: var(--offset);
}
.range::after {
  counter-reset: x var(--max);
  right: var(--offset);
  transform: translateX(calc(50% * var(--LTR)));
}
[dir="rtl"] .range::after {
  right: auto;
  left: var(--offset);
}
.range__progress {
  position: absolute;
  left: 0;
  top: calc(50% - var(--ticks-height) / 2);
  transform: var(--flip-y, translateY(-50%) translateZ(0));
  width: 100%;
  height: calc(var(--track-height));
  pointer-events: none;
  z-index: -1;
  /* box-shadow: var(--progress-shadow); */
  border-radius: 20px;
  background: var(--fill-color, white);
}
.range__progress::after {
  content: "";
  display: block;
  margin-left: auto;
  margin-right: -1px;
  width: calc(
    (100% - var(--completed) * 1%) + (var(--completed) / 100) *
      var(--thumb-size) / 2
  );
  height: 100%;
  background: var(--progress-color, #eee);
  box-shadow: inherit;
  border-radius: 0 20px 20px 0;
}
[dir="rtl"] .range__progress::after {
  margin-right: auto;
  margin-left: -1px;
  border-radius: 20px 0 0 20px;
}
.range > input {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-size);
  margin: 0;
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none;
}
.range > input::-webkit-slider-thumb {
  appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input::-moz-slider-thumb {
  appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input::-ms-thumb {
  appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input:active {
  cursor: grabbing;
  --thumb-color: var(--fill-color);
  --inner-shadow: 0 0 0 calc(var(--thumb-size) / 4) inset white;
}
.range > input:active + output {
  transition: 0s;
}
.range > input:hover + output {
  --value-background: var(--primaryColor);
  color: var(--value-active-color);
  transform: translate(var(--x-offset), 0);
  box-shadow: 0 0 0 3px var(--value-background);
}
.range > output {
  --x-offset: calc(var(--completed) * -1% * var(--LTR));
  --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
  pointer-events: none;
  position: absolute;
  z-index: 5;
  background: var(--value-background);
  border-radius: 10px;
  padding: 0 4px;
  /* top: -3ch; */
  top: 2.5ch;
  left: var(--pos);
  transform: translate(var(--x-offset), 6px);
  transition: all 0.12s ease-out, left 0s, top 0s;
}
[dir="rtl"] .range > output {
  left: auto;
  right: var(--pos);
}
.range > output::after {
  content: var(--text-value);
  font: var(--value-font);
}

.range.title-size,
.range.description-size,
.range.account-name-size,
.range.regular-text-size {
  --step: 10;
}