OddSite 4.0.0

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.

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

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

Map Properties

@content (code block)

The styles to apply to range input tracks

@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.

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

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

Map Properties

@content (code block)

The styles to apply to range input thumbs