/input-range-scss

Styling Cross-Browser Compatible Range Inputs with Sass

Primary LanguageCSSMIT LicenseMIT

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

Input range native and custom on browsers

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