csstools / postcss-input-range

Use unprefixed input range selectors in CSS

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

postcss-input-range's Issues

Override required in Chrome

Thanks for sharing this code.

None of these styles will work in Chrome unless -webkit-appearance: none is set on the input element as well as each of the individual styled shadow DOM components.

Is it possible to have these added automatically?

If not, it would be nice to have the requirement documented.

Latest version causing an error

I just upgraded to the latest version, running postcss through webpack, and it's throwing a loader error for me now, without a specific message. However, once I downgrade to 2.0.0, it compiles correctly, so I assume it must be this package.

Looked through the commit, and I don't entirely understand why it would be breaking, but it is 😢

Missing support for fill-lower and fill-upper

I am really missing the opportunity to style the progress (-moz-range-progress, -ms-fill-lower), as well as a bundled selector to hide IE's ticks. (::-ms-ticks-before, ::-ms-ticks-after, ::-ms-track).

The latest commit on master is not released to npm

Hi Jonathan, could you please release the latest version on master to NPM.

Kind regards
Sune