Implement drag all when more than two handles are configured

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 10.1.0 - 2017-07-28 13:09:54 */
+/*! nouislider - 10.1.0 - 2017-11-22 12:08:52 */
 /* 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 - 10.1.0 - 2017-07-28 13:09:54 */
+/*! nouislider - 10.1.0 - 2017-11-22 12:08:52 */
 
 (function (factory) {
 
@@ -1844,33 +1844,46 @@ function closure ( target, options, originalOptions ){
 		}
 
 		// Make the range draggable.
-		if ( behaviour.drag ){
+		if (behaviour.drag) {
 
-			scope_Connects.forEach(function( connect, index ){
+			scope_Connects.forEach(function (connect, index) {
 
-				if ( connect === false || index === 0 || index === scope_Connects.length - 1 ) {
+				if (connect === false || index === 0 || index === scope_Connects.length - 1) {
 					return;
 				}
 
 				var handleBefore = scope_Handles[index - 1];
 				var handleAfter = scope_Handles[index];
 				var eventHolders = [connect];
+				var handlesToDrag = [handleBefore, handleAfter];
+				var handleNumbersToDrag = [index - 1, index];
 
 				addClass(connect, options.cssClasses.draggable);
 
 				// When the range is fixed, the entire range can
 				// be dragged by the handles. The handle in the first
 				// origin will propagate the start event upward,
 				// but it needs to be bound manually on the other.
-				if ( behaviour.fixed ) {
+				if (behaviour.fixed) {
 					eventHolders.push(handleBefore.children[0]);
 					eventHolders.push(handleAfter.children[0]);
 				}
 
-				eventHolders.forEach(function( eventHolder ) {
-					attachEvent ( actions.start, eventHolder, eventStart, {
-						handles: [handleBefore, handleAfter],
-						handleNumbers: [index - 1, index]
+				// Check for the option dragAllHandles to see if
+				// must drag all handles at the same time
+				if (originalOptions.dragAllHandles) {
+					handlesToDrag = scope_Handles;
+					handleNumbersToDrag = [0];
+					while (handleNumbersToDrag.length < scope_Handles.length)
+					{
+						handleNumbersToDrag.push(handleNumbersToDrag.length);
+					}
+				}
+
+				eventHolders.forEach(function (eventHolder) {
+					attachEvent(actions.start, eventHolder, eventStart, {
+						handles: handlesToDrag,
+						handleNumbers: handleNumbersToDrag
 					});
 				});
 			});

documentation/behaviour-option.php

@@ -105,6 +105,21 @@
 	</div>
 </section>
 
+<section>
+
+	<div class="view">
+		<p>If you want to drag all handles when you have more than two, you can set the <code>dragAllHandles</code> option to <strong>true</strong>. The <code>slide</code> event fires for all handles when dragging the range.</p>
+		<div class="example">
+			<div id="drag-all"></div>
+			<?php run('drag-all'); ?>
+		</div>
+	</div>
+
+	<div class="side">
+		<?php code('drag-all'); ?>
+	</div>
+</section>
+
 
 <?php sect('fixed'); ?>
 <h2>Fixed dragging</h2>

documentation/behaviour-option/drag-all.js

@@ -0,0 +1,12 @@
+var dragSlider = document.getElementById('drag-all');
+
+noUiSlider.create(dragSlider, {
+	start: [ 40, 60, 80 ],
+	behaviour: 'drag',
+	dragAllHandles: true,
+	connect: true,
+	range: {
+		'min':  20,
+		'max':  80
+	}
+});

src/js/scope_events.js

@@ -223,33 +223,46 @@
 		}
 
 		// Make the range draggable.
-		if ( behaviour.drag ){
+		if (behaviour.drag) {
 
-			scope_Connects.forEach(function( connect, index ){
+			scope_Connects.forEach(function (connect, index) {
 
-				if ( connect === false || index === 0 || index === scope_Connects.length - 1 ) {
+				if (connect === false || index === 0 || index === scope_Connects.length - 1) {
 					return;
 				}
 
 				var handleBefore = scope_Handles[index - 1];
 				var handleAfter = scope_Handles[index];
 				var eventHolders = [connect];
+				var handlesToDrag = [handleBefore, handleAfter];
+				var handleNumbersToDrag = [index - 1, index];
 
 				addClass(connect, options.cssClasses.draggable);
 
 				// When the range is fixed, the entire range can
 				// be dragged by the handles. The handle in the first
 				// origin will propagate the start event upward,
 				// but it needs to be bound manually on the other.
-				if ( behaviour.fixed ) {
+				if (behaviour.fixed) {
 					eventHolders.push(handleBefore.children[0]);
 					eventHolders.push(handleAfter.children[0]);
 				}
 
-				eventHolders.forEach(function( eventHolder ) {
-					attachEvent ( actions.start, eventHolder, eventStart, {
-						handles: [handleBefore, handleAfter],
-						handleNumbers: [index - 1, index]
+				// Check for the option dragAllHandles to see if
+				// must drag all handles at the same time
+				if (originalOptions.dragAllHandles) {
+					handlesToDrag = scope_Handles;
+					handleNumbersToDrag = [0];
+					while (handleNumbersToDrag.length < scope_Handles.length)
+					{
+						handleNumbersToDrag.push(handleNumbersToDrag.length);
+					}
+				}
+
+				eventHolders.forEach(function (eventHolder) {
+					attachEvent(actions.start, eventHolder, eventStart, {
+						handles: handlesToDrag,
+						handleNumbers: handleNumbersToDrag
 					});
 				});
 			});