Range Input Tools

Provide browser-prefixed selectors for styling range input tracks and thumbs.

@mixin track()

Generate browser-prefixed selector blocks for styling range input ‘tracks’. This works like a selector, with content rather than arguments.

Map Properties

@content (code block)

The styles to apply to range input tracks

Example

scss

@use 'tools/input-range' as range;

.track {
  @include range.track {
    appearance: none;
    height: 1em;
    cursor: pointer;
  }
}

css compiled

.track::-webkit-slider-runnable-track {
  appearance: none;
  height: 1em;
  cursor: pointer;
}
.track::-moz-range-track {
  appearance: none;
  height: 1em;
  cursor: pointer;
}
.track::-ms-track {
  appearance: none;
  height: 1em;
  cursor: pointer;
}

@mixin thumb()

Generate browser-prefixed selector blocks for styling range input ‘thumbs’ – the handle that can be moved along a track. This works like a selector, with content rather than arguments.

Map Properties

@content (code block)

The styles to apply to range input thumbs

Example

scss

@use 'tools/input-range' as range;

.thumb {
  @include range.thumb {
    appearance: none;
    height: 1em;
    width: 0.5em;
    background: var(--ccs-prime);
    cursor: pointer;
  }
}

css compiled

.thumb::-webkit-slider-thumb {
  appearance: none;
  height: 1em;
  width: 0.5em;
  background: var(--ccs-prime);
  cursor: pointer;
}
.thumb::-moz-range-thumb {
  appearance: none;
  height: 1em;
  width: 0.5em;
  background: var(--ccs-prime);
  cursor: pointer;
}
.thumb::-ms-thumb {
  appearance: none;
  height: 1em;
  width: 0.5em;
  background: var(--ccs-prime);
  cursor: pointer;
}