Styling Cross-Browser Compatible Range Inputs with Sass / SCSS

input-range-scss is a Sass component designed to simplify the customization of 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.

Why Use input-range-scss?

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

Installation

Install the package via NPM:

``
npm i input-range-scss
`

Features

- 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

Example

Below is an example of how the library can transform native range inputs into styled sliders:

!Input range native and custom on browsers

Usage

To use this library in your project, import it as a Sass module:

`scss
@use 'input-range-scss';
`

$3

Override the default styles by passing your own values to the Sass variables using the with keyword:

`scss
@use 'input-range-scss' with (
$track-color: #ff5722,
$thumb-color: #4caf50,
$thumb-height: 20px,
$thumb-width: 20px,
$track-height: 10px,
);
`

$3

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.

Changelog

To see the change history of this project, check out the changelog.md` file.

See Also

- Input range browser support
- CSS Tricks: Styling Cross-Browser Compatible Range Inputs