iOS 7 like JavaScript range slider solution

Powerange.js is a nice UI component, that implements iOS 7 like JavaScript range slider plugin.

iOS 7 like JavaScript range slider plugin – Go! Go! Powerange.js!

Powerange is an awesome solution for UI range (or quantity) sliders, with a nice iOS 7 style. Using JavaScript and CSS, we can customize many details, such as colors and general styles, set horizontal or vertical mode, custom min, max and start values, custom step interval, displaying decimal values, displaying icons instead of min / max numbers, and others.

This is a great, cross-browser solution, that works in Google Chrome 14+, Mozilla Firefox 6.0+, Opera 11.6+, Safari 5+, IE 9+, and more.

Powerange.js - iOS 7 like jQuery range slider plugin
Powerange.js – iOS 7 like JavaScript range slider plugin

Usage

Include files with JS and CSS code of the plugin:

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

Run the plugin by simple JS lines:

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

Please note, that the element must be a text input.

Default settings are as follows:

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

Basic style customization is simple. 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 options, to get nice effects.

Customizing parameters in JS is also simple, for example:

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
var init = new Powerange(elem, { step: 10 });

// make z vertical slider
var init = new Powerange(elem, { vertical: true });

// ...

Checking and handling the values is also very simple:

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

clickButton.addEventListener('click', function() {
  alert(clickInput.value);
});

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

changeInput.onchange = function() {
  alert(changeInput.value);
};

The callback function is invoked on slider initialization and on slider handle movement:

var elem = document.querySelector('.js-range');
var init = new Powerange(elem, { callback: displayValue });

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

License: MIT

Docs & demos:

http://abpetkov.github.io/powerange

Get the iOS 7 like JavaScript range slider plugin from GitHub:

https://github.com/abpetkov/powerange

You may also like:

jQuery and Bootstrap color picker sliders

Sly scrolling plugin – a lightweight, one directional slider

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest0