basscss-addons/modules/input-range/index.css

Optional modules to extend Basscss

/* Basscss Input Range */

.input-range {
  vertical-align: middle;
  background-color: transparent;
  padding-top: var(--form-field-padding-y);
  padding-bottom: var(--form-field-padding-y);
  color: inherit;
  background-color: transparent;
  -webkit-appearance: none;
}

.input-range::-webkit-slider-thumb {
  position: relative;
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  cursor: pointer;
  margin-top: var(--range-thumb-offset);
  border-radius: var(--border-radius);
  background-color: currentcolor;
  -webkit-appearance: none;
}

/* Touch screen friendly pseudo element */
.input-range::-webkit-slider-thumb:before {
  content: '';
  display: block;
  position: absolute;
  top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) );
  left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) );
  width: var(--range-thumb-pseudo-size);
  height: var(--range-thumb-pseudo-size);
  opacity: 0;
}

.input-range::-moz-range-thumb {
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  border-color: transparent;
  border-width: 0;
  background-color: currentcolor;
}

.input-range::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.input-range::-moz-range-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.input-range:focus {
  outline: none;
}

:root {
  --form-field-padding-x: .5rem;
  --form-field-padding-y: .5rem;
  --form-field-height: 2.25rem;
  --border-radius: 3px;
  --darken-3: rgba(0, 0, 0, .25);

  --range-thumb-width: var(--form-field-padding-x);
  --range-thumb-height: calc( var(--form-field-height) - (var(--form-field-padding-y) * 2) );
  --range-track-height: calc( var(--form-field-padding-y) / 2 );
  --range-thumb-offset: calc( var(--range-thumb-height) / -2 + (var(--range-track-height) / 2) );
  --range-thumb-pseudo-size: var(--form-field-height);
}