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

• Correction of input cursor to default (thanks, pichfl)

1.5.0

• Added :disabled state (thanks, mpavel)
• Improved normalization across browsers (thanks, guidezpl and GufNZ)
• Removed Firefox border outline on focus (thanks, DeanPoulin)

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