iOS 7 style range slider
Follow me: abpetkov apetkov

About Powerange

Powerange is a range slider control, inspired heavily by iOS 7 and the "Power Rangers" TV series. It is easily customizable, both by CSS and JavaScript. With it's many features, including changing color and overall style, switching between horizontal and vertical style, custom min, max and start values, custom step interval, displaying decimal values, displaying icons instead of min/max numbers, it is a really powerful UI tool to use on your website.

A great cross-browser solution, supporting: Google Chrome 14+, Mozilla Firefox 6.0+, Opera 11.6+, Safari 5+, IE 9+

Licensed under The MIT License.

If you like this module and you're a fan of iOS 7 style UI widgets, check out Switchery.

Star the GitHub repo



<link rel="stylesheet" href="dist/powerange.css" />
<script src="dist/powerange.js"></script>


$ component install abpetkov/powerange


$ bower install powerange


var elem = document.querySelector('.js-range');
var init = new Powerange(elem);

Use the above for the standalone version.

NOTE: your element must be a text input

Settings and Defaults

defaults = {
    callback      : function() {}
  , decimal       : false
  , disable       : false
  , disableOpacity: 0.5
  , hideRange     : false
  , klass         : ''
  , min           : 0
  , max           : 100
  , start         : null
  , step          : null
  , vertical      : false
  • callback

    function invoked on initialization and on slider handle movement

  • decimal

    display decimal number

  • disable

    enable or disable slider

  • disableOpacity

    opacity of the disabled slider

  • hideRange

    show or hide min and max range values

  • klass

    additional class for the slider wrapper for extra customization

  • min

    minimum range value

  • max

    maximum range value

  • start

    starting value

  • step

    step of the handle

  • vertical

    toggle between horizontal or vertical slider


Basic style customization

You are free to customize the range slider as much as you wish, using only CSS.

The width (for horizontal) or height (for vertical) of the slider, depends on the container in which it's placed and take 100%.

Play around with the background-color of .range-bar and .range-quantity, add a background-image to .range-handle, add some nice background-image to .range-min and .range-max, get use of the hideRange option and you may end up with something as fun as this:

The sky is the limit.

Hint: Use the klass option to add an additional class to the slider and apply different style to it

Minimum, maximum and start values

Changing your default min, max and start values is pretty easy. The start value has to be a number in your min-max interval, otherwise it takes the value of either min or max, depending on which is closer. Negative values are supported as well.

var init = new Powerange(elem, { min: 16, max: 256, start: 128 });


Display decimal number with 2 characters after the decimal point.

var init = new Powerange(elem, { decimal: true });

Slider step

You can change the step with which the handle moves, using the step option.

var init = new Powerange(elem, { step: 10 });

Hide range values

You can hide the min and max values, by using the hideRange option.

var init = new Powerange(elem, { hideRange: true });


Disable the range slider and change it's default disabledOpacity if needeed.

var init = new Powerange(elem, { disable: true, disabledOpacity: 0.75 });

Horizontal and vertical slider

The default Powerange slider is horizontal. However, you can make it vertical, by setting vertical: true.

var init = new Powerange(elem, { vertical: true });

Checking state

Check the current value of the range slider, by looking at the value of the text input element.

On click:

var clickInput = document.querySelector('.js-check-click')
  , clickButton = document.querySelector('.js-check-click-button')

clickButton.addEventListener('click', function() {

On change:

var changeInput = document.querySelector('.js-check-change');

changeInput.onchange = function() {
  document.getElementById('js-display-change').innerHTML = changeInput.value;


The callback function is invoked on slider initialization and on slider handle movement. It's very appropriate for displaying the current value in another element.

var elem = document.querySelector('.js-range');
var init = new Powerange(elem);

function displayValue() {
  document.getElementById('display-box').innerHTML = elem.value;

Interacting with another elements

Just a simple example of how you can interact with an element, when changing the slider value. In this case, we change the opacity of an awesome power ranger mask.

var elem = document.querySelector('.js-range');
var init = new Powerange(elem, { callback: setOpacity, decimal: true, min: 0, max: 1, start: 1 });

function setOpacity() {
  document.querySelector('.js-change-opacity').style.opacity = elem.value;


If you've decided to go in development mode and tweak this module, there are few things you should do.

Make your own build files, by using Grunt command:

$ grunt build

Add the following code before the initialization:

var Powerange = require('powerange');

Make sure you're using the build/build.js and build/build.css files and you're ready.

There are some useful commands you can use:

  • $ grunt watch

    watches for changes in the CSS and JS files in lib/ and updates the build files

  • $ grunt componentbuild

    updates the files in build/

  • $ grunt uglify

    makes new JS standalone files

  • $ grunt cssmin

    makes new CSS standalone files

  • $ grunt clean

    empties the contents of build/ and dist/ folders

To have a full Powerange experience, please consider using an updated version of your browser or another modern browser.