Styling Cross-Browser Compatible Range Inputs with Sass / SCSS

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 form CSS Tricks blog.

NPM Package

npm install --save input-range-scss

Features

• Variables for easy customization
• Uses the native properties of each browser
• Preserves accessibility
• Cross-browser compatible

Example

Changelog

• 1.4.1: Fixing example page
• 1.4.0: NPM Package
• 1.3.0: Better default style and example page
• 1.2.0: Improvement in SCSS lint (thanks, Dustin McCaffree)
• 1.1.1: Fix track height in IE and thumb margin in Edge (thanks, danclaydonpm and jenstornell)
• 1.1.0: Make all variables as '!default'. (thanks, n0nick)
• 1.0.1: SCSS-Lint fix. (thanks, CookPete)

See Also

Input range browser support