CSS: Use the --range-color property to change the color of the range. Use the --track-background property for more extensive customization.

how? pls show example

thanks

In latest Safari as well as in Safari Technology preview- handles seem to leave shadows after moving them. Triggering a repaint visually fixes that.

I can't find any, on this repo or on https://leaverou.github.io/multirange/ .
Is there any??

Ghost input returns single value, whereas it has attribute multiple. That is confusing in case if we try to handle input event and read this.value.

I am trying multirange in prama, it is very graceful solution for inputs, thanks @LeaVerou!

P. S. [Un]fortunately traditionally IE shits the bed.

Can this fixed somehow via css?

It seems that as of some time between July 10, 2016, and July 31, 2016, the "multiple" attribute was removed from the input[type=range] spec, and is now listed as "does not apply".

Here is the latest web archive page with that text:
http://web.archive.org/web/20160710230742/https://html.spec.whatwg.org/multipage/forms.html#range-state-(type=range):attr-input-multiple-3

Removed

Clicking on the track moves only the one handle. I think it would be more intuitive to move the closest handle.

Example:
If range is set from 40% to 60% and i tap at 80% the range should be 40% to 80%
If the initial range is the same and i tap at 20% the final range will be 20% to 60%

This plugin doesn't seem to operate or load as expected for me in the latest Chrome (v62).
In a new Incognito window I go to https://leaverou.github.io/multirange/ and see this in the console:

Uncaught TypeError: Cannot read property 'bind' of null
    at self.multirange (multirange.js:60)
    at Array.forEach (<anonymous>)
    at HTMLDocument.multirange.init (multirange.js:74)

I get the error in Safari too at this URL. Same error when I include the script on a page of my own.

Removed

I'm trying to play around with how the input can be styled (vertically, diagonally), but it seems there's no support for this. Are there any known solutions to this problem? Else, this should probably be added as a limitation to the GitHub site.

[DEMO]
https://codepen.io/xenyal/pen/QvqVZq

CDN is good place where polyfills can be.

You can add package.json to add npm support. Other developers can import your polyfill to page through browserify.

As you can see caniuse statistics - CSS Variables is supported only by modern browsers. So please add IE browsers support.

Is there a way around this? the events only fire when I move the first handle

Allow users to drag the current values to a new position.

The expected behavior can be seen here: http://refreshless.com/nouislider/slider-options/#section-limit

Removed

Removed

Hello,

The multirange polyfill works just fine in JSFiddle, but won't work in my Vue.js project.

Line 112 in multirange.js is the issue: module.exports = multirange; which gives me the following error:
"TypeError: Cannot assign to read only property 'exports' of object '#<Object>'"

If I comment that line, the component would be loaded as a simple HTML input range element...

I looked for solutions on the Internet and found that using export ... instead of module.exports = ... could solve the issue, but I can't manage to use it properly (I'm using Vue.js which only allows me to use export on the top of the page). Is there a proper way to import this IIFE with the export default statement?

Thanks

I'm testing the demo-page in IE11 (in Browserstack), but I only see one slider and not two as it says in the demo. Perhaps it's not implemented yet or am I missing something?

If we give the input width:100% and place it in a parent that has padding, the multirange input doesn't look right. The "ghost" input has the right width, but the "original" (which is given position:absolute) has a width that doesn't respect the padding.