abpetkov / powerange

iOS 7 style range slider

Description

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.

Installation

Standalone:

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

Component:

$ component install abpetkov/powerange

Bower:

$ bower install powerange

Usage

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

Examples

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

Decimal

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

Disabled

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

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

You can still give it a value, by changing the start option.

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 value

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() {
  alert(clickInput.value);
});

On change:

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

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

Callback

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, { callback: displayValue });

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.

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

function setOpacity() {
  document.querySelector('.target').style.opacity = elem.value;
}

Development

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

Contact

If you like this component, share your appreciation by following me in Twitter, GitHub or Dribbble.

License

The MIT License (MIT)

Copyright (c) 2014 Alexander Petkov

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

powerange's Issues

How to reset at start value

Hi..
how can i reset slider value at start value.

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

Hi everyone!

When I tried to use the library, I got this error:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at new Horizontal (powerange.js:1602)
at new module.exports (powerange.js:1268)

Where does this come from? I just copied one of the examples in the example file:

<script>
    var stp = document.querySelector('.js-step');
    var initStp = new Powerange(stp, { start: 50, step: 10 });
</script>

<div class="slider-wrapper">
    <input type="text" class="js-step" />
</div>

Thank you very much!

Can we use two pointers

Can we use two pointers for minimum and maximum limits

css Scale support?

amazing work!

i wonder if there is a way to make the slider like this ?

|||||

Useless and buggy range slider - DON'T USE IT

It does not handle resizing during window resizes. Sometimes handle with bar stays outside of the rangeslider container

It does not support even basic things, like:
moving handle when clicking on some area on the bar
It does have ugly naming conventions

Why may person be such a dumb to not consider such little important things during development.

Man, you developed terrible, shitty library.
I wish I had DOWNVOTE button to destroy this fucking "library"

How to change max and start after init

After init powerrange,how to change the start and max without create a new object?

Chrome & Safari Crash when adding 'step'

My code is:

@$powerrange = @$('.js-range')
new Powerange(@$powerrange[0], { step: 10 })

I console.log all the functions and its crashing on line 1185

 ctor.prototype = Object.create(superCtor.prototype,
      { constructor: {
            value: ctor
          , enumerable: false
          , writable: true
          , configurable: true
        }
    });

Please help! I like this plugin and without step it wont work for me...
Thanks!

How to disable/enable exists slider?

Hi

How to disable/enable exists slider?

Thanks

Getting undefined value

I am trying to get the value of any of the sliders that change.
I am using the following code:

$('.js-hiderange').each(function() { $(this).on('change',function (ev) { alert($(this).value); }); });

But I get undefined value.
How can I fix this without using a specific ID for every slider?

callback with parameters ???

Hey,

is it somehow possible to add parameters to the callback function?

that would make the callback much more useful, since it is possible to pass an index or a classname for the callback.

Would be great if you could implement that. It is not possible at the moment.

Thanks!

with kind regards

Change constraints/scripts via script

As far as I see, you can only set min/max/start on creation, but not control them via API.
That should be added.

Multiple Callbacks ??

Hi, i just downloaded the powerange plugin but i need more than one callback sliders on the same page. How can i achieve that?

Use data api for options

Hi
Really a great job you did with Powerange. I like your slide component a lot and use it in a current web app project.

There is few things I am missing, and I think I just add them as "issues".

Please add data api support and/or support for HTML5 attributes. That would make Powerange even simpler to use and minimizes the amount of js/coffeee to be written.

Example:

<input class="powerange" type="text" value="100" min="10" max="150" step="5" data-hide-range="true">

slider bar should be tap-able

Touching the handle itself is a pain sometimes. It would be nice if the slider bar itself is a tap target.

Infinite loop error when css file not loaded

Without the css file loaded, an infinite loop occured. Very difficult to debug. Please update the logic to fail a little more gracefully.

Not working on mobile

The slider does not "slide" when Im on some mobile devices, e.g: Samsung Galaxy S4 mini does not works but it works on an android tablet must of the time.

Is there any work around I should know?

feature request

It would be cool if there is a method that sets the slider value. For example clicking a button sets the slider to a specific value.

disabled should not change mouse cursor

EG, don't show the 4-directions cursor when hovering over the disabled slider.

Thanks for the cool lib!

How to redraw slider on resize windows?

Resize 100% div and this - http://i.imgur.com/3SBKe6y.png

How to use Powerange with React?

Powerange is a wonderful plugin, I used it in my project before.
But now we're migrating to React (i'm new to it), is there anyway to use Powerange in React?
Please give me some hints, or keywords.

Thank you so much

poweranges crashes mozilla with min:1000, max:25000, step:10000

It just start eating up memory until everything crashes.

Crashes entire web page if element is not visible when Powerange initalizes

Should work with input[type="number|range"]

https://github.com/abpetkov/powerange/blob/master/lib/main.js#L33 <- this currently checks for "text", which is really not the correct type for a range slider.
Ideally, it should just act as a drop-in replacement for a normal html5 range input.

i am using this plugin for range data. It works fine but i need now to work on click

i am using this plugin for range data. It works fine but i need now to work on click. can u suggest me the feasible way to use this on click.

Update value of input element

Powerange does not apply the slider value back to the input element it is bound to. Please bind Powerange slider value to input element value.

Advantage:
Developers would not need to single-handedly implement the callback function and set the value of the input upon slider value change.

How to Use the slider for iterating it in a loop

How do I make the slider to work when I have a loop to create multiple sliders .
I have used switchery and there is an option for making it inside an array using
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});

So how do i do this for the slider without this only the first slider gets displayed and rest of the slider look like the default one

Crashes Safari when step parameter is passed in options

Safari 9.0.3 (11601.4.4) on El Capitan 10.11.3 (15D21).

It doesn't matter what value you pass, if you set the option to any value when the range is created, it will crash.

Also, disappointing to see the project has been abandoned (based in lack of reply to anyone else reporting crashes).

Plugin doesn't work

Sorry, but i can't find mistake
console:
Cannot read property 'offsetWidth' of undefined