Input Range
Input Range allows you to style input ranges with unprefixed selectors.
/* before */ /* after */
Supported selectors
::range-track
Styles the track of a range.
::range-thumb
Styles the thumb of a range.
::range-lower
Styles the lower track of a range before the thumb. Only supported in Firefox, Edge and IE 10+.
::range-upper
Styles the upper track of a range after the thumb. Only supported in Edge and IE 10+.
Usage
Add Input Range to your build tool:
npm install postcss-input-range --save-dev
Node
/* options */ ;
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Load Input Range as a PostCSS plugin:
;
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Enable Input Range within your Gulpfile:
var postcss = ; gulp;
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Enable Input Range within your Gruntfile:
grunt; grunt;
Options
method
Type: String
Default: 'replace'
clone
Copies any rules with ::range
pseudo-elements to new rules using prefixes.
/* before */ /* after */
replace
Copies any rules with ::range
pseudo-elements to new rules using prefixes while removing the original.
/* before */ /* after */
warn
Warns whenever a ::range
pseudo-class is found.
strict
Type: Boolean
Default: true
true
Ignores prefixed ::range
-type pseudo-classes.
/* before */ /* after */
false
Processes prefixed ::range
-type pseudo-classes.
/* before */ /* after */