hi
i thanks for write this plugin
this is very nice.
i want to have two input with different caption and when i scroll each input, value of its change on side of it.
example:
http://s5.picofile.com/file/8116349650/scroll.jpg

Webkit and IE9+ when the min and max attributes are changed via script the slider "respects" the new values, but in IE8 it doesn't seem to have effect and it considers only values which the slider was initiated with.

polyfill doesn't respect disabled state of the input element. Slider is still operational.

Isn't this plugin a "slider", and not a "range slider"? This slider only has one point to move, which obviously does not classify as a "range." The name is confusing because I searched Google and found this plugin, but it doesn't allow for a "range" of values in slider form. Shouldn't the name be changed?

It's impossible to set a max to 0 for now

this.max        = parseFloat(this.$element[0].getAttribute('max')) || 100;

0 is false, so it goes to 100 by default.

Instead of landing directly to the click point, it should step towards it. Which is default behaviour for sliders.

For instance, if the handle is at 0% and user clicks somewhere 100%, new handle position should be 10%, if stepping is 10.

I get this error when using the slider on ios 5-7 (it does slide normally but once i lift my finger the error appears ).

Do to the error the callbacks don't fire (onside, onSlideEnd.. etc)

Here is what i got from the remote debug log on safari (demo has the same issue)

[[Warning] Invalid CSS property declaration at: ; (style.css, line 2406)
[Error] TypeError: 'undefined' is not an object (evaluating 'e.originalEvent.touches[0].clientX')
getRelativePosition (rangeslider.js, line 249)
handleEnd (rangeslider.js, line 206)
e (jquery.js, line 2)
dispatch (jquery.js, line 3)
handle (jquery.js, line 3)

Hi,
I am sorry if this place is for issues, but can't find another place where to ask a question, I noticed in the demo that the slider have only one value,
My question is

1. It is possible to have two values in the slider ? how to read them in an text input ?

2)Is this working when javascript is disabled ?
Thanks

Just tied it in Chrome Version 32.0.1700.107 m on win7.
It does not work.

Are there any issues around handleEnd on touch devices? I'm finding rangeslider works fine on a mouse/desktop but the same code has problems on iPad and Android tablets. It seems handleEnd only calls my onSlideEnd func on every other handleEnd event. Looks like it barfs at the call to getRelativePosition. Any ideas?

Make the slider smoother on ms-touch devices e.g Windows Phone 8.

Browser: Chrome (Mobile), Chrome (Desktop with Galaxy S4 Emulator turned on)

Steps to reproduce:

1. Open Chrome Developer Tools (CTRL+Shift+C)
2. At the bottom near Console click on Emulation
3. From the dropdown select "Samsung Galaxy S4" and click "Emulate"
4. Go to http://andreruffert.github.io/rangeslider.js/
5. On the page drag the slider to the left

Expected:
No javascript errors in the console

Actual:
Uncaught TypeError: Cannot read property 'clientX' of undefined rangeslider.js:249
Plugin.getRelativePosition rangeslider.js:249
Plugin.handleEnd rangeslider.js:206
m.extend.proxy.m.isFunction.e jquery.min.js:2
m.event.dispatch jquery.min.js:3
m.event.add.r.handle jquery.min.js:3

In the code this is at

Plugin.prototype.getRelativePosition = function(node, e) {
return (e.pageX || e.originalEvent.clientX || e.originalEvent.touches[0].clientX || e.currentPoint.x) - this.getPositionFromNode(node);
};

When trying to access e.originalEvent.touches[0]

This causes my app not to work on mobile which is pretty unfortunate because your slider is awesome.

In addition to rangeslider.js, rangeslider still appears with bower search rangeslider pointing to git://github.com/andreruffert/rangeslider.git

However with http://bower.io/search/?q=rangeslider only one rangeslider.js shows up.

Any idea why this happens?

This isn't clear from the docs.

Is there anyway to prevent it from 'snapping', instead just having smooth sliding from 0 - 100?

Thanks

On both firefox and chrome, the demo site is broken because of this:

Blocked loading mixed active content "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"

[Learn More]

I have a value of 5.3 in my <input type="range" step="0.1" max="10" value="5.3" but the rangeslider sets itself to 5.4 instead.

Also, onSlide: function(position, value) { returns 5.4 as value for that first run (without having touched the slider - just initial values ...

Maybe related:
When step value is set to 0.1 (like I have in code above) when sliding I get values of 3.79 and 3.90 (in stead of 3.8 and 3.9)

Thanks for a nice plugin. Would be awesome if these "bugs" can be solved.
Tested this on Safari and Chrome (on mac)

If the input is inside a hidden element (example: a bootstrap tab), then the initialization wont get the widths and the component will not behave the way it should.
The workaround is to initialize only when the input becomes visible, but it would be nice if this worked seamlessly

Hey there,

So I discovered a weird bug related to those hybrid touchscreen laptops floating around there on the market. Issue is verified to exist even on: http://andreruffert.github.io/rangeslider.js/

If you are using a laptop with a touchscreen, you cannot modify the slider with anything other than touch. You can touch the dial and move it like normal, but cannot use the mouse to modify the dial.

This looks like the culprit in the source:

function isTouchScreen() {
        var bool = false,
            DocumentTouch = DocumentTouch || {};
        if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
            bool = true;
        }
        return bool;
    }

    var pluginName = 'rangeslider',
        pluginInstances = [],
        touchevents = isTouchScreen(),
        inputrange = supportsRange(),
        defaults = {
            polyfill: true,
            rangeClass: 'rangeslider',
            fillClass: 'rangeslider__fill',
            handleClass: 'rangeslider__handle',
            startEvent: ((!touchevents) ? 'mousedown' : 'touchstart') + '.' + pluginName,
            moveEvent: ((!touchevents) ? 'mousemove' : 'touchmove') + '.' + pluginName,
            endEvent: ((!touchevents) ? 'mouseup' : 'touchend') + '.' + pluginName
        };

Can the plugin work with both touchstart AND mouse events?

Seamonkey 2.11.
TypeError: invalid 'instanceof' operand DocumentTouch
In Seamonkey object DocumentTouch is not empty.

Obsolete since Gecko 25 (Firefox 25 / Thunderbird 25 / SeaMonkey 2.22)
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it (https://developer.mozilla.org/en-US/docs/Web/API/DocumentTouch).

I can dynamically change the value of an input, but not the min or max attributes and have it adjust the slider? Thoughts on how this could be achieved?

Use Case: I'm making a media player with a timeline that changes from video to video in a playlist. The total duration (the max) changes between videos.

This looks like a great polyfill/plugin but I need to use it for vertical range's too (volume control in a video player. Is this something you're considering?

If you enter the value 49 it will jump to 50. There is no way to get to value 49.

I couldn't find a changelog.
Is there one?

Thank you

Hi Andre,

Can you please tell me what's the best way to add background image on each step value?

Thanks in advance....

Hi,

You did a great job for rangeslider.js. Thanks you so much for that.
I have a question:

1. How can I display each slider with its own output in same page
2. How can I pass string value instead of int e.g. it's displaying value="50" as 50 in output screen but when I do value="XYZ", its telling undefined

Can you please help out?

Thanks with best regards,
Ripal

Over at
https://github.com/andreruffert/rangeslider.js/blob/master/bower.json#L4

"main": "src/rangeslider.js"

should read

"main": "dist/rangeslider.js"

as src is excluded in bower.json

is it possible to design complex scrollers like this attached.

Hover and complex calculations

Warmest

To set starting and ending point, two handles are necessary. If you plan to implement this, please let handles to move both ways when overlapped. Many sliders fail to do that.

Hi,

The slider control doesn't seem to be working on touch screen pc (IE browser), unable to slide, it seems to be fine on other browsers on the same pc. maybe we need to extend the rangeslider to support the MSTouchEvents if mspointerEnabled is true

When using something like this on IE9;

#zoomer {
    display: none;
    position: absolute;
}
#zoomer.show {
    display: block;
    position: static;
}

<div id='zoomer'>
    <input type='range' min='1' max='3' step='0.05' value='1'>
</div>

<!--[if lte IE 9 ]>
<script src="js/rangeslider.min.js"></script>
<script>
    jQuery(document).ready(function($){
        $('#zoomer input').rangeslider({polyfill: false});
    )};
</script>
<![endif]-->

And then later some JS adding show class to #zoomer, the #zoomer becomes visable, the input is hidden and the correct rangeslider elements are created, however rangeslider__handle is not able to be moved.

To fix this make the element shown, call rangeslider() on it, and then hide it with some JS on load

.ie9 #zoomer {
    display: block;
    position: static;
}

<!--[if lte IE 9 ]>
    <script src="js/rangeslider.min.js"></script>
    <script>
        jQuery(document).ready(function($){
            $('#zoomer input').rangeslider({polyfill: false});
            if($('html').hasClass('ie9')) {
                $('#zoomer').css({
                    'display': 'none',
                    'position': 'absolute'
                });
            }
        });
    </script>
<![endif]-->

Hi Andre,

Once we apply style display none to div which is containing output and input range and then using JQuery if we remove display none, slider is not working as per expectation.

Can you please suggest solution for this?
Thanks in advance.

Regards,
Ripal

The slider control has keyboard arrow-key support, probably some other keys and input events too. The plugin removes that support, making it kinda hard for people who are handicapped and not nearly as fast with a mouse.

I am trying to initialized two range slider by jquery . and updating width of the slider. it dosn't wor but when i press f12 or inspect element it's automatically correct and working . i am bit confuse is that happening.

When using the minified file I get syntax errors, this is because of an unsafe transformation here:

https://github.com/andreruffert/rangeslider.js/blob/master/src/rangeslider.js#L110

Simple fix, just put parenthisis around +new Date, ex:

(+new Date())

You can't default a slider to 0, it sets to half of the range.

This seems to be the problem:

this.value  = parseFloat(this.$element[0].value) || this.min + (this.max-this.min)/2;

Something like this might do the trick:

var value = parseFloat(this.$element[0].value);
this.value      = !isNaN(value) ? value : this.min + (this.max-this.min)/2;

This slider seems to work well in non-IE versions, but in IE11, the display is very unpredictable - sometimes it works and sometimes it displays the slider too far wide. See screenshot attached.
You can see in the screenshot how crazy it appears. If I refresh the page, it often clears up, but that's not a solution.
This page has about 30 sliders on it. Each has a value preset in the "value" parameter of the element. I welcome solutions because I would love to continue to use this slider, but it's only working about half the time the page loads in IE11. If I refresh the page in IE11, it will correct itself and display correctly about 75% of the time. This site also uses the Bootstrap 3.0 CSS framework. Looks and works great in Firefox!

The second screenshot shows the correct display.

Slider drags for Chrome and Safari on OS X, but not for Firefox 27.

Resulting green filled area being on the right of handle.

Can we have set of restricted values in the slider like

values = [1, 5, 15, 30, 60]

To reproduce:

1. create a slider
2. note the value
3. set the slider element to display: none
4. resize the window
5. set the slider element to display: block

Expected behavior: the slider retains its previous value and is usable.

Observed behavior: the slider value changes to 50% of the slider range. The slider becomes unresponsive.

Workaround: visibility: hidden; height: 0; on the slider element works fine, but is not a direct replacement

It may have been a poor choice when I elected to give my body a width less than that of the window, but Its too late to turn back now.

It seems that range slider is calculating mouse position relative to the window but is positioning the handle relative to the body, meaning whenever my window is wider than 1190 in this case, the output value (and handle placement) are off by the difference between my body element edge and the wind edge.

I tried changing this.$window = $(window); to this.$window = $("body"); - but no luck there.

Any guesses?

Sliding one instance current affects all others on the document.

Great plugin, btw.

Could you add this to CDNJS as a hosted library?

cdnjs will host any production version of any JavaScript/CSS library, subject to licence permissions.

https://github.com/cdnjs/cdnjs

The bug was introduced in #33.

Firefox and chrome implementation snap to each steps even when the step is "1". You can reproduce the issue by creating an input like this <input type="range" min="0" max="5" step="1" value="2">. When you add rangeslider.js it stop snapping.

Here is a simple jsfiddle which shows the issue: http://jsfiddle.net/JdkjF/

For reference: http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step

On first load the sliders all work fine. When you reload the page, moving certain sliders will cause others to also move. This issue has been tested on 4 XP boxes running ie8. Two consistently reproduced the error and the other two rarely or have never produced the error.

Example: http://goo.gl/CHsv3T

Hi André,

I have an other issue. In our case min is 50 and not 0.
"Uncaught TypeError: Cannot read property '0' of undefined"

Thank you :-)

cheers,

e.