Fix slider constraints on init conditions #1009

Author: leongersen

CHANGELOG.MD

@@ -1,5 +1,8 @@
 # Changelog
 
+### 14.0.3 (*2019-10-10*)
+- Fixed: Initialising handle values near the slider edge does not always respect `margin` (#1009);
+
 ### 14.0.2 (*2019-06-28*)
 - Fixed: Keyboard interaction uses formatter when it does not need to (#1000);
 

CONTRIBUTING.md

@@ -5,6 +5,15 @@ For help with implementing this slider, ask your question on [stackoverflow](htt
 
 While I'm happy to help if you can't figure something out, please note this: I won't debug screenshots or issues that do not include **an example with code** that reproduces it. I also won't dig through your production site or huge chunks of unrelated code. I also won't implement your business requirements for you.
 
+# Tooling
+
+Please run the following tooling before submitting a pull request:
+
+```bash
+npm run lint
+npm run format
+```
+
 # Pull requests
 - Detail (in the pull request comment) what your changes do.
 - When applicable, include new unit tests.

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 14.0.2 - 6/28/2019 */
+/*! nouislider - 14.0.3 - 10/10/2019 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.

distribute/nouislider.js

@@ -1,4 +1,4 @@
-/*! nouislider - 14.0.2 - 6/28/2019 */
+/*! nouislider - 14.0.3 - 10/10/2019 */
 (function(factory) {
     if (typeof define === "function" && define.amd) {
         // AMD. Register as an anonymous module.
@@ -13,7 +13,7 @@
 })(function() {
     "use strict";
 
-    var VERSION = "14.0.2";
+    var VERSION = "14.0.3";
 
     //region Helper Methods
 
@@ -2198,10 +2198,15 @@
                 setHandle(handleNumber, resolveToValue(values[handleNumber], handleNumber), true, false);
             });
 
-            // Second pass. Now that all base values are set, apply constraints
-            scope_HandleNumbers.forEach(function(handleNumber) {
-                setHandle(handleNumber, scope_Locations[handleNumber], true, true);
-            });
+            var i = scope_HandleNumbers.length === 1 ? 0 : 1;
+
+            // Secondary passes. Now that all base values are set, apply constraints.
+            // Iterate all handles to ensure constraints are applied for the entire slider (Issue #1009)
+            for (; i < scope_HandleNumbers.length; ++i) {
+                scope_HandleNumbers.forEach(function(handleNumber) {
+                    setHandle(handleNumber, scope_Locations[handleNumber], true, true);
+                });
+            }
 
             setZindex();
 

distribute/nouislider.min.css

@@ -1,6 +1,6 @@
 {
   "name": "nouislider",
-  "version": "14.0.2",
+  "version": "14.0.3",
   "main": "distribute/nouislider.js",
   "style": "distribute/nouislider.min.css",
   "license": "MIT",

distribute/nouislider.min.js

@@ -2198,9 +2198,10 @@
             });
 
             var i = scope_HandleNumbers.length === 1 ? 0 : 1;
+
+            // Secondary passes. Now that all base values are set, apply constraints.
+            // Iterate all handles to ensure constraints are applied for the entire slider (Issue #1009)
             for (; i < scope_HandleNumbers.length; ++i) {
-                // Issue #1009
-                // Second pass. Now that all base values are set, apply constraints
                 scope_HandleNumbers.forEach(function(handleNumber) {
                     setHandle(handleNumber, scope_Locations[handleNumber], true, true);
                 });

package.json

@@ -58,6 +58,7 @@
 <script src="slider_setting-getting.js"></script>
 <script src="slider_update.js"></script>
 <script src="slider_get-step.js"></script>
+<script src="slider_init_max.js"></script>
 <script src="slider_unordered.js"></script>
 <script src="slider_errors.js"></script>
 <script src="slider_binding.js"></script>

src/nouislider.js

@@ -0,0 +1,21 @@
+QUnit.test("Test init of slider values near max", function (assert) {
+
+    document.getElementById('qunit-fixture').innerHTML = '<div class="slider"></div>';
+
+    var slider = document.getElementById('qunit-fixture').querySelector('.slider');
+    var max = 10;
+
+    noUiSlider.create(slider, {
+        start: [max, max, max, max],
+        step: 1,
+        margin: 1,
+        tooltips: true,
+        pips: {mode: 'count', values: 5},
+        range: {
+            'min': 0,
+            'max': max
+        }
+    });
+
+    assert.deepEqual(slider.noUiSlider.get(), ['7.00', '8.00', '9.00', '10.00']);
+});