noUiSlider 12.1.0

.gitattributes

@@ -1 +0,0 @@
-/distribute/* -diff

.gitignore

@@ -1,4 +1,2 @@
 /node_modules
-*.log
-*.zip
 .idea

.npmignore

@@ -1,3 +1 @@
 documentation/
-*.zip
-*.log

README.md

@@ -19,6 +19,11 @@ An extensive documentation, including **examples**, **options** and **configurat
 Changelog
 ---------
 
+### 12.1.0 (*2018-10-25*)
+- Added: `unconstrained` behaviour (#747, #815, #913)
+- Added: `setHandle` API (#917)
+- Changed: point to `nouislider.js` in `package.json`.`main` (#921)
+
 ### 12.0.0 (*2018-09-14*) 
 - Change: License changed to MIT;
 - Change: Build process is now based on NPM scripts, phasing out the Grunt task runner.

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 12.0.0 - 9/14/2018 */
+/*! nouislider - 12.1.0 - 10/25/2018 */
 /* 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 - 12.0.0 - 9/14/2018 */
+/*! nouislider - 12.1.0 - 10/25/2018 */
 (function(factory) {
     if (typeof define === "function" && define.amd) {
         // AMD. Register as an anonymous module.
@@ -13,7 +13,7 @@
 })(function() {
     "use strict";
 
-    var VERSION = "12.0.0";
+    var VERSION = "12.1.0";
 
     function isValidFormatter(entry) {
         return typeof entry === "object" && typeof entry.to === "function" && typeof entry.from === "function";
@@ -700,6 +700,7 @@
         var fixed = entry.indexOf("fixed") >= 0;
         var snap = entry.indexOf("snap") >= 0;
         var hover = entry.indexOf("hover") >= 0;
+        var unconstrained = entry.indexOf("unconstrained") >= 0;
 
         if (fixed) {
             if (parsed.handles !== 2) {
@@ -710,12 +711,19 @@
             testMargin(parsed, parsed.start[1] - parsed.start[0]);
         }
 
+        if (unconstrained && (parsed.margin || parsed.limit)) {
+            throw new Error(
+                "noUiSlider (" + VERSION + "): 'unconstrained' behaviour cannot be used with margin or limit"
+            );
+        }
+
         parsed.events = {
             tap: tap || snap,
             drag: drag,
             fixed: fixed,
             snap: snap,
-            hover: hover
+            hover: hover,
+            unconstrained: unconstrained
         };
     }
 
@@ -1433,8 +1441,7 @@
                 pointer = true;
             }
 
-            // In the event that multitouch is activated, the only thing one handle should be concerned
-            // about is the touches that originated on top of it.
+            // The only thing one handle should be concerned about is the touches that originated on top of it.
             if (touch) {
                 // Returns true if a touch originated on the target.
                 var isTouchOnTarget = function(checkTouch) {
@@ -1827,7 +1834,7 @@
         function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
-            if (scope_Handles.length > 1) {
+            if (scope_Handles.length > 1 && !options.events.unconstrained) {
                 if (lookBackward && handleNumber > 0) {
                     to = Math.max(to, reference[handleNumber - 1] + options.margin);
                 }
@@ -2082,6 +2089,26 @@
             valueSet(options.start, fireSetEvent);
         }
 
+        // Set value for a single handle
+        function valueSetHandle(handleNumber, value, fireSetEvent) {
+            var values = [];
+
+            // Ensure numeric input
+            handleNumber = Number(handleNumber);
+
+            if (!(handleNumber >= 0 && handleNumber < scope_HandleNumbers.length)) {
+                throw new Error("noUiSlider (" + VERSION + "): invalid handle number, got: " + handleNumber);
+            }
+
+            for (var i = 0; i < scope_HandleNumbers.length; i++) {
+                values[i] = null;
+            }
+
+            values[handleNumber] = value;
+
+            valueSet(values, fireSetEvent);
+        }
+
         // Get the slider value.
         function valueGet() {
             var values = scope_Values.map(options.format.to);
@@ -2224,6 +2251,7 @@
             off: removeEvent,
             get: valueGet,
             set: valueSet,
+            setHandle: valueSetHandle,
             reset: valueReset,
             // Exposed for unit testing, don't use this in your application.
             __moveHandles: function(a, b, c) {

documentation/behaviour-option.php

@@ -11,7 +11,7 @@
 
 		<p>noUiSlider offers several ways to handle user interaction. The range can be set to drag, and handles can move to taps. All these effects are optional, and can be enable by adding their keyword to the <code>behaviour</code> option.</p>
 
-		<p>This option accepts a <code>"-"</code> separated list of <code>"drag"</code>, <code>"tap"</code>, <code>"fixed"</code>, <code>"snap"</code> or <code>"none"</code>.</p>
+		<p>This option accepts a <code>"-"</code> separated list of <code>"drag"</code>, <code>"tap"</code>, <code>"fixed"</code>, <code>"snap"</code>, <code>"unconstrained"</code> or <code>"none"</code>.</p>
 
 		<div class="example">
 			<div id="behaviour"></div>
@@ -60,6 +60,12 @@
 		<p>Fire <code>hover</code> events when a user with a mouse or pen hovers over the slider.</p>
 	</div>
 
+	<div class="double">
+
+		<pre><code>behaviour: "unconstrained-tap"</code></pre>
+		<p>Allow handles to move past each other.</p>
+	</div>
+
 	<div class="double">
 
 		<pre><code>behaviour: "none"</code></pre>
@@ -165,6 +171,27 @@
 </section>
 
 
+<?php sect('unconstrained'); ?>
+<h2>Unconstrained</h2>
+
+<section>
+
+	<div class="view">
+		<p>With this option set, handles are allowed to move past each other. The <code>limit</code> and <code>margin</code> options cannot be used with this behaviour.</p>
+        <p>All APIs will return slider values in the original handle order, regardless of whether handles have changed places.</p>
+		<div class="example">
+			<div id="unconstrained"></div>
+            <span class="example-val" id="unconstrained-values"></span>
+			<?php run('unconstrained'); ?>
+		</div>
+	</div>
+
+	<div class="side">
+		<?php code('unconstrained'); ?>
+	</div>
+</section>
+
+
 <?php sect('combined'); ?>
 <h2>Combined options</h2>
 

documentation/behaviour-option/unconstrained.js

@@ -0,0 +1,16 @@
+var unconstrainedSlider = document.getElementById('unconstrained');
+var unconstrainedValues = document.getElementById('unconstrained-values');
+
+noUiSlider.create(unconstrainedSlider, {
+    start: [20, 50, 80],
+    behaviour: 'unconstrained-tap',
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
+unconstrainedSlider.noUiSlider.on('update', function (values) {
+    unconstrainedValues.innerHTML = values.join(' :: ');
+});

documentation/examples/keypress-event.js

@@ -1,14 +1,8 @@
-function setSliderHandle(i, value) {
-    var r = [null, null];
-    r[i] = value;
-    keypressSlider.noUiSlider.set(r);
-}
-
 // Listen to keydown events on the input field.
 inputs.forEach(function (input, handle) {
 
     input.addEventListener('change', function () {
-        setSliderHandle(handle, this.value);
+        keypressSlider.noUiSlider.setHandle(handle, this.value);
     });
 
     input.addEventListener('keydown', function (e) {
@@ -30,7 +24,7 @@ inputs.forEach(function (input, handle) {
         switch (e.which) {
 
             case 13:
-                setSliderHandle(handle, this.value);
+                keypressSlider.noUiSlider.setHandle(handle, this.value);
                 break;
 
             case 38:
@@ -45,7 +39,7 @@ inputs.forEach(function (input, handle) {
 
                 // null = edge of slider
                 if (position !== null) {
-                    setSliderHandle(handle, value + position);
+                    keypressSlider.noUiSlider.setHandle(handle, value + position);
                 }
 
                 break;
@@ -59,7 +53,7 @@ inputs.forEach(function (input, handle) {
                 }
 
                 if (position !== null) {
-                    setSliderHandle(handle, value - position);
+                    keypressSlider.noUiSlider.setHandle(handle, value - position);
                 }
 
                 break;

documentation/examples/keypress-slider.js

@@ -6,7 +6,6 @@ var inputs = [input0, input1];
 noUiSlider.create(keypressSlider, {
     start: [20, 80],
     connect: true,
-    direction: 'rtl',
     tooltips: [true, wNumb({decimals: 1})],
     range: {
         'min': [0],

documentation/reference.php

@@ -194,7 +194,12 @@
             <tr>
                 <td><a href="/nouislider/slider-read-write/#section-setting">set</a></td>
                 <td><code>slider.noUiSlider.set(...)</code></td>
-                <td><em>[...]</em></td>
+                <td><em>[...]</em>, <code>boolean</code></td>
+            </tr>
+            <tr>
+                <td><a href="/nouislider/slider-read-write/#section-setting">setHandle</a></td>
+                <td><code>slider.noUiSlider.setHandle(..., ..., ...)</code></td>
+                <td><code>"number"</code>, <code>"string"</code>, <code>boolean</code></td>
             </tr>
             <tr>
                 <td><a href="/nouislider/slider-read-write/#section-setting">reset</a></td>

documentation/slider-read-write.php

@@ -32,11 +32,17 @@
 
 	<div class="view">
 
-		<p>noUiSlider will keep your values within the slider range, which saves you a bunch of validation.</p>
+        <p>If you have configured the slider to use one handle, you can change the current value by passing a number to the <code>.set()</code> method.</p>
 
-		<p>If you have configured the slider to use one handle, you can change the current value by passing a number to the <code>.set()</code> method. If you have two handles, pass an array. One-handled sliders will also accept arrays.</p>
+        <p>For sliders with multiple handles, pass an array. One-handled sliders will also accept arrays.</p>
 
-		<p>Within an array, you can set one position to <code>null</code> if you want to leave a handle unchanged.</p>
+		<p>Within an array, you can set any position to <code>null</code> to you leave a handle unchanged.</p>
+
+        <p>noUiSlider will always limit values to the slider range.</p>
+
+        <p>To set a single slider handle, the <code>setHandle</code> method can be used. This method accepts a zero-indexed handle number, a value and optionally a 'fire set event' boolean.</p>
+
+        <p>Passing <code>null</code> as the value to <code>setHandle</code> will leave the handle unchanged.</p>
 
 		<p>To return to the initial slider values, you can use the <code>.reset()</code> method. This will <strong>only</strong> reset the slider <i>values</i>.</p>
 	</div>

documentation/slider-read-write/write.js

@@ -6,11 +6,16 @@ noUiSlider.create(slider, /* { options } */);
 slider.noUiSlider.set(10);
 slider.noUiSlider.set([150]);
 
-// Set the upper handle,
-// don't change the lower one.
+// Set the upper handle on a slider with two handles,
+// don't change the lower one
 slider.noUiSlider.set([null, 14]);
 
-// Set both slider handles
+// On a slider with three handles,
+// set the third to 12 (the handleNumber is 0-indexed)
+// Then: fire the set event
+slider.noUiSlider.setHandle(2, 12, true);
+
+// Set both slider handles on a slider with two handles
 slider.noUiSlider.set([13.2, 15.7]);
 
 // Return to the 'start' values

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nouislider",
-  "version": "12.0.0",
-  "main": "distribute/nouislider",
+  "version": "12.1.0",
+  "main": "distribute/nouislider.js",
   "style": "distribute/nouislider.min.css",
   "license": "MIT",
   "scripts": {

src/nouislider.js

@@ -699,6 +699,7 @@
         var fixed = entry.indexOf("fixed") >= 0;
         var snap = entry.indexOf("snap") >= 0;
         var hover = entry.indexOf("hover") >= 0;
+        var unconstrained = entry.indexOf("unconstrained") >= 0;
 
         if (fixed) {
             if (parsed.handles !== 2) {
@@ -709,12 +710,19 @@
             testMargin(parsed, parsed.start[1] - parsed.start[0]);
         }
 
+        if (unconstrained && (parsed.margin || parsed.limit)) {
+            throw new Error(
+                "noUiSlider (" + VERSION + "): 'unconstrained' behaviour cannot be used with margin or limit"
+            );
+        }
+
         parsed.events = {
             tap: tap || snap,
             drag: drag,
             fixed: fixed,
             snap: snap,
-            hover: hover
+            hover: hover,
+            unconstrained: unconstrained
         };
     }
 
@@ -1432,8 +1440,7 @@
                 pointer = true;
             }
 
-            // In the event that multitouch is activated, the only thing one handle should be concerned
-            // about is the touches that originated on top of it.
+            // The only thing one handle should be concerned about is the touches that originated on top of it.
             if (touch) {
                 // Returns true if a touch originated on the target.
                 var isTouchOnTarget = function(checkTouch) {
@@ -1826,7 +1833,7 @@
         function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
-            if (scope_Handles.length > 1) {
+            if (scope_Handles.length > 1 && !options.events.unconstrained) {
                 if (lookBackward && handleNumber > 0) {
                     to = Math.max(to, reference[handleNumber - 1] + options.margin);
                 }
@@ -2081,6 +2088,26 @@
             valueSet(options.start, fireSetEvent);
         }
 
+        // Set value for a single handle
+        function valueSetHandle(handleNumber, value, fireSetEvent) {
+            var values = [];
+
+            // Ensure numeric input
+            handleNumber = Number(handleNumber);
+
+            if (!(handleNumber >= 0 && handleNumber < scope_HandleNumbers.length)) {
+                throw new Error("noUiSlider (" + VERSION + "): invalid handle number, got: " + handleNumber);
+            }
+
+            for (var i = 0; i < scope_HandleNumbers.length; i++) {
+                values[i] = null;
+            }
+
+            values[handleNumber] = value;
+
+            valueSet(values, fireSetEvent);
+        }
+
         // Get the slider value.
         function valueGet() {
             var values = scope_Values.map(options.format.to);
@@ -2223,6 +2250,7 @@
             off: removeEvent,
             get: valueGet,
             set: valueSet,
+            setHandle: valueSetHandle,
             reset: valueReset,
             // Exposed for unit testing, don't use this in your application.
             __moveHandles: function(a, b, c) {