input-range-scss is a Sass component designed to simplify the customization of <input type="range"> elements across all major browsers. It leverages native browser properties while maintaining accessibility and cross-browser compatibility. This library was created for developers and designers looking to create polished, consistent range sliders without sacrificing usability.
- Customizable: Easily override default styles with Sass variables to match your design system.
- Cross-Browser Compatibility: Ensures consistent styling across Chrome, Firefox, Safari, Edge, and Internet Explorer.
- Accessibility: Preserves native accessibility features, ensuring your sliders are usable for all users.
- Lightweight: Focused on styling only, with no JavaScript dependencies.
- Modern Sass Features: Uses the latest Sass module system for clean and maintainable code.
Install the package via NPM:
npm i input-range-scss
- Predefined variables for effortless customization
- Support for modern and legacy browsers
- Built-in mixins for shadows and other effects
- Modular Sass structure for easy integration
Below is an example of how the library can transform native range inputs into styled sliders:
To use this library in your project, import it as a Sass module:
@use 'input-range-scss';Override the default styles by passing your own values to the Sass variables using the with keyword:
@use 'input-range-scss' with (
$track-color: #ff5722,
$thumb-color: #4caf50,
$thumb-height: 20px,
$thumb-width: 20px,
$track-height: 10px,
);Here are some of the key variables you can customize:
-
$track-color: The color of the slider track. -
$thumb-color: The color of the slider thumb. -
$thumb-height: The height of the slider thumb. -
$thumb-width: The width of the slider thumb. -
$track-height: The height of the slider track. -
$contrast: Adjusts the contrast for hover and active states.
For a complete list of variables, see the source file.
To see the change history of this project, check out the changelog.md file.