Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darlanrod/input-range-scss
Styling Cross-Browser Compatible Range Inputs with Sass
https://github.com/darlanrod/input-range-scss
cross-browser design form front-end input npm npm-package range sass scss style
Last synced: 3 days ago
JSON representation
Styling Cross-Browser Compatible Range Inputs with Sass
- Host: GitHub
- URL: https://github.com/darlanrod/input-range-scss
- Owner: darlanrod
- License: mit
- Created: 2016-01-05T01:32:14.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-09-05T15:11:04.000Z (over 1 year ago)
- Last Synced: 2025-01-12T11:08:26.581Z (10 days ago)
- Topics: cross-browser, design, form, front-end, input, npm, npm-package, range, sass, scss, style
- Language: SCSS
- Size: 62.5 KB
- Stars: 325
- Watchers: 6
- Forks: 90
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) from CSS Tricks blog.
## NPM Package
```
npm i 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](https://github.com/darlanrod/input-range-scss/raw/master/example/input-range-browsers.jpg)
## Usage
To use this library in your stylesheets, import it as a Sass module:
```
@use 'input-range-scss';
```
To override the default styling, use the `with` keyword along with any variables you would like to override, for example:```
@use 'input-range-scss' with (
$track-color: red,
$thumb-color: blue,
$thumb-height: 2em,
$thumb-width: 2em,
);
```For a complete list of variables see https://github.com/darlanrod/input-range-scss/blob/master/_inputrange.scss#L9.
NB. including the module will apply styles all elements matching the CSS selector `[type='range']`.
## Changelog
To see the change history of this project, check out the `changelog.md` file.
## See Also
[Input range browser support](http://caniuse.com/#feat=input-range)