National Preventative Mechanism

    postcss-input-range

    5.0.0 • Public • Published

    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'
        }
      }
    });

    Install

    npm i postcss-input-range

    DownloadsWeekly Downloads

    3,516

    Version

    5.0.0

    License

    CC0-1.0

    Unpacked Size

    18.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • alaguna
    • jonathantneal