Merge dev, release

README.md

@@ -27,7 +27,7 @@ npm [(package)](https://www.npmjs.com/package/nouislider)
 Changelog
 ---------
 
-### 11.0.0 (t.b.a)
+### 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.
@@ -136,3 +136,26 @@ noUiSlider.create(slider, {
   }
 });
 ```
+
+Webpack
+-------
+In order to use this with webpack, the easiest way to work with it is by using the [`ProvidePlugin`](https://webpack.js.org/plugins/provide-plugin/):
+
+```javascript
+// webpack.config.js
+var webpack = require('webpack');
+...
+plugins: [
+	new webpack.ProvidePlugin({
+		noUiSlider: 'nouislider'
+	})
+]
+...
+```
+
+If you're using ES6 imports, a simple [import with side effect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only)
+is enough:
+
+```
+import 'nouislider';
+```

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;