Sass component for customizing the input range using the native properties of each browser. Based on article Styling Cross-Browser Compatible Range Inputs with CSS from CSS Tricks blog.
npm i input-range-scss
- Variables for easy customization
- Uses the native properties of each browser
- Preserves accessibility
- Cross-browser compatible
To use this library in your stylesheets, import it as a Sass module:
@use 'input-range-scss';
To override the default styling, use the with keyword along with any variables you would like to override, for example:
@use 'input-range-scss' with (
$track-color: red,
$thumb-color: blue,
$thumb-height: 2em,
$thumb-width: 2em,
);
For a complete list of variables see https://github.com/darlanrod/input-range-scss/blob/master/_inputrange.scss#L9.
NB. including the module will apply styles all elements matching the CSS selector [type='range'].
To see the change history of this project, check out the changelog.md file.