Merge branch 'dev'

README.md

@@ -3,15 +3,11 @@
 noUiSlider is lightweight JavaScript range slider.
 
 - **No dependencies**
-- All modern browsers and [IE9+](#browser-support) are supported
+- All modern browsers and IE > 9 are supported
 - Fully **responsive**
 - **Touch support** on Android, iOS and Windows devices
 - Tons of [examples](https://refreshless.com/nouislider/examples) and answered [Stack Overflow questions](https://stackoverflow.com/questions/tagged/nouislider)
 
---------
-**Quick note:** I'm out of town for a while, so support will be slower than usual. Apologies in advance.
---------
-
 License
 -------
 noUiSlider is licensed [WTFPL](http://www.wtfpl.net/about/). You can use it **for free** and **without any attribution**, in any personal or commercial project. You may also fork the project and re-release it under another license you prefer.
@@ -31,6 +27,24 @@ npm [(package)](https://www.npmjs.com/package/nouislider)
 Changelog
 ---------
 
+### 11.0.0 (*2018-01-12*)
+noUiSlider 11 doesn't include any breaking API changes.
+Unless major changes were made to the stylesheet or you specifically depend
+on the handle/connect order in the DOM, there should be no issues upgrading.
+- Change: Use CSS transforms for handle movement, resulting in a massive performance improvement (#718);
+- Change: Support multitouch by default;
+- Change: Handle stacking is now on `.noUi-origin` instead of `.noUi-handle`;
+- Added: A `.noUi-connects` element holding all `.noUi-connect` elements;
+- Added: `[data-value]` property for `.noUi-value` in pips (#733);
+- Added: `padding` option can now take an array for different padding values at both sides of a slider (#822);
+- Removed: `useRequestAnimationFrame` option. No longer needed with CSS transforms;
+- Removed: `multitouch` option. Now enabled by default;
+- Fixed: Slider could ignore end events it should handle (#704, #805, #834);
+- Fixed: Stop depending on array type (#801);
+- Fixed: `set` method might bypass margin option (#823);
+- Fixed: Alignment of pips for RTL sliders (#795);
+- Fixed: Several issues regarding pips (#812, #826, #832);
+
 ### 10.1.0 (*2017-07-26*)
 - Added: `multitouch` option (#793);
 
@@ -40,7 +54,7 @@ Changelog
 - Fixed: Content Security Policy issue with pips;
 - Added: `removePips` method;
 - Added: aria support (#685);
-- Added: `ariaFormat` option (controls `aria-valuetext`); 
+- Added: `ariaFormat` option (controls `aria-valuetext`);
 - Fixed: throw a better error when mistakenly trying to initialize noUiSlider with `null` (#658);
 - Fixed: Made order of events consistent and documented it (#775);
 - Fixed: Border radius of connect bar, white space wrapping of tooltips (#773, #774);
@@ -145,17 +159,3 @@ is enough:
 ```
 import 'nouislider';
 ```
-
-Browser support
----------------
-
-All major browsers are supported. **To support IE8** you'll need to shim several ES5 features.
-
-You can use [polyfill.io](https://cdn.polyfill.io/v2/docs/) to easily do so:
-
-```html
-<meta http-equiv="X-UA-Compatible" content="IE=Edge">
-<!--[if lte IE 8]>
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-<![endif]-->
-```

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 10.1.0 - 2017-07-28 13:09:54 */
+/*! nouislider - 11.0.0 - 2018-01-12 20:37:52 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -20,45 +20,51 @@
   position: relative;
   direction: ltr;
 }
-.noUi-base {
+.noUi-base,
+.noUi-connects {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 1;
-  /* Fix 401 */
 }
-.noUi-connect {
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0;
+}
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
   position: absolute;
-  right: 0;
+  z-index: 1;
   top: 0;
   left: 0;
-  bottom: 0;
+  height: 100%;
+  width: 100%;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
 }
-.noUi-origin {
-  position: absolute;
-  height: 0;
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
   width: 0;
 }
+.noUi-horizontal .noUi-origin {
+  height: 0;
+}
 .noUi-handle {
   position: relative;
-  z-index: 1;
 }
 .noUi-state-tap .noUi-connect,
 .noUi-state-tap .noUi-origin {
-  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
+  -webkit-transition: transform 0.3s;
+  transition: transform 0.3s;
 }
 .noUi-state-drag * {
   cursor: inherit !important;
 }
-/* Painting and performance;
- * Browsers can paint handles in their own layer.
- */
-.noUi-base,
-.noUi-handle {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
 /* Slider size and handle placement;
  */
 .noUi-horizontal {
@@ -80,19 +86,19 @@
   top: -17px;
 }
 /* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
  */
 .noUi-target {
   background: #FAFAFA;
   border-radius: 4px;
   border: 1px solid #D3D3D3;
   box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
 }
+.noUi-connects {
+  border-radius: 3px;
+}
 .noUi-connect {
   background: #3FB8AF;
-  border-radius: 4px;
-  box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
-  -webkit-transition: background 450ms;
-  transition: background 450ms;
 }
 /* Handles and cursors;
  */
@@ -196,8 +202,12 @@
   width: 100%;
 }
 .noUi-value-horizontal {
-  -webkit-transform: translate3d(-50%, 50%, 0);
-  transform: translate3d(-50%, 50%, 0);
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+}
+.noUi-rtl .noUi-value-horizontal {
+  -webkit-transform: translate(50%, 50%);
+  transform: translate(50%, 50%);
 }
 .noUi-marker-horizontal.noUi-marker {
   margin-left: -1px;
@@ -220,10 +230,14 @@
   left: 100%;
 }
 .noUi-value-vertical {
-  -webkit-transform: translate3d(0, 50%, 0);
-  transform: translate3d(0, 50%, 0);
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%, 0);
   padding-left: 25px;
 }
+.noUi-rtl .noUi-value-vertical {
+  -webkit-transform: translate(0, 50%);
+  transform: translate(0, 50%);
+}
 .noUi-marker-vertical.noUi-marker {
   width: 5px;
   height: 2px;