Skip to content

csstools/postcss-input-range

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Input Range PostCSS Logo

NPM Version test Discord

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-dev

Node

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-dev

Use 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-dev

Use 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-dev

Use Input Range in your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
        require('postcss-input-range')()
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});