Input Range 
Input Range lets you style input ranges with unprefixed selectors.
/* before */
::range-track {
background: #3071a9;
width: 100%;
}
::range-thumb {
border-radius: 3px;
cursor: pointer;
}
/* after */
::-moz-range-track {
background: #3071a9;
width: 100%;
}
::-ms-track {
background: #3071a9;
width: 100%;
}
::-webkit-slider-runnable-track {
background: #3071a9;
width: 100%;
}
::-moz-range-thumb {
border-radius: 3px;
cursor: pointer;
}
::-ms-thumb {
border-radius: 3px;
cursor: pointer;
}
::-webkit-slider-thumb {
border-radius: 3px;
cursor: pointer;
}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+.
Options
method
Type: String
Default: 'replace'
clone
Copies any rules with ::range pseudo-elements to new rules using prefixes.
/* before */
::range-thumb {
border-radius: 3px;
}
/* after */
::-moz-range-thumb {
border-radius: 3px;
}
::-ms-thumb {
border-radius: 3px;
}
::-webkit-slider-thumb {
border-radius: 3px;
}
::range-thumb {
border-radius: 3px;
}
replace
Copies any rules with ::range pseudo-elements to new rules using prefixes while removing the original.
/* before */
::range-thumb {
border-radius: 3px;
}
/* after */
::-moz-range-thumb {
border-radius: 3px;
}
::-ms-thumb {
border-radius: 3px;
}
::-webkit-slider-thumb {
border-radius: 3px;
}
warn
Warns whenever a ::range pseudo-class is found.
strict
Type: Boolean
Default: true
true
Ignores prefixed ::range-type pseudo-classes.
/* before */
::-ms-thumb {
border-radius: 3px;
}
/* after */
::-ms-thumb {
border-radius: 3px;
}
false
Processes prefixed ::range-type pseudo-classes.
/* before */
::-ms-thumb {
border-radius: 3px;
}
/* after */
::-moz-range-thumb {
border-radius: 3px;
}
::-ms-thumb {
border-radius: 3px;
}
::-webkit-slider-thumb {
border-radius: 3px;
}Usage
Add Input Range to your build tool:
npm install postcss postcss-input-range --save-devNode
Use Input Range to process your CSS:
require('postcss-input-range').process(YOUR_CSS);PostCSS
Add PostCSS to your build tool:
npm install postcss --save-devUse Input Range as a plugin:
postcss([
require('postcss-input-range')()
]).process(YOUR_CSS);Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devUse Input Range in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-input-range')()
])
).pipe(
gulp.dest('.')
);
});Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devUse Input Range in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-input-range')()
]
},
dist: {
src: '*.css'
}
}
});