// https://github.com/yairEO/ui-range
// overrides:
.knobs .range-slider {
  --fill-color: var(--range-track-color);
  --primaryColor: var(--range-value-background);

  --value-active-color: var(--range-track-color);
  --value-background: transparent;
  --value-background-hover: white;
  --value-offset-y: 9px;

  --progress-background: #444;
  --thumb-size: 14px;
  --track-height: calc(var(--thumb-size)/3);
  --ticks-thickness: 1px;
  --ticks-height: 0px;
  --show-min-max: none;
  --thumb-color: var(--range-track-color);
  --thumb-shadow: 0 0 3px rgba(0,0,0,.2), 0 0 0 calc(var(--thumb-size)/6) inset white;
  --thumb-shadow-active: 0 0 3px rgba(0,0,0,.2), 0 0 0 calc(var(--thumb-size)/4) inset white;

  color: transparent;

  > input:hover + output {
    box-shadow: 0 0 0 3px var(--value-background),
                0 0 6px 4px var(--background);
  }
}