Skip to content
Use unprefixed input range selectors in CSS
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Update tests for PostCSS 6 Jun 28, 2017
.appveyor.yml Support AppVeyor testing Jun 28, 2017
.gitignore
.tape.js
.travis.yml Explicit Node 4+ compatibility Jun 28, 2017
CHANGELOG.md
CONTRIBUTING.md Update CONTRIBUTING.md Jun 28, 2017
LICENSE.md LICENSE.md spacing Jun 28, 2017
README.md README.md AppVeyor results, spacing Jun 28, 2017
index.js
package.json 4.0.0 Jun 28, 2017

README.md

Input Range PostCSS Logo

NPM Version Linux Build Status Windows Build Status Gitter Chat

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-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'
    }
  }
});
You can’t perform that action at this time.