Merge branch 'dev'

src/js/scope.js

@@ -82,7 +82,7 @@
 		// Convert the value to the slider stepping/range.
 		scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);
 
-		var rule = 'translate(' + inRuleOrder(toPct(transformDirection(to, 0)), '0') + ')';
+		var rule = 'translate(' + inRuleOrder(toPct(transformDirection(to, 0) - scope_DirOffset), '0') + ')';
 		scope_Handles[handleNumber].style[options.transformRule] = rule;
 
 		updateConnect(handleNumber);

src/js/scope_helpers.js

@@ -143,6 +143,12 @@
 	function calcPointToPercentage ( calcPoint ) {
 		var location = calcPoint - offset(scope_Base, options.ort);
 		var proposal = ( location * 100 ) / baseSize();
+
+		// Clamp proposal between 0% and 100%
+		// Out-of-bound coordinates may occur when .noUi-base pseudo-elements 
+		// are used (e.g. contained handles feature)
+		proposal = limit(proposal);
+
 		return options.dir ? 100 - proposal : proposal;
 	}
 
@@ -161,7 +167,7 @@
 
 			var pos = Math.abs(scope_Locations[index] - proposal);
 
-			if ( pos < closest ) {
+			if ( pos < closest || (pos === 100 && closest === 100) ) {
 				handleNumber = index;
 				closest = pos;
 			}

src/js/scope_start.js

@@ -21,3 +21,7 @@ function closure ( target, options, originalOptions ){
 	var scope_Document = target.ownerDocument;
 	var scope_DocumentElement = scope_Document.documentElement;
 	var scope_Body = scope_Document.body;
+
+	// For horizontal sliders in standard ltr documents,
+	// make .noUi-origin overflow to the left so the document doesn't scroll.
+	var scope_DirOffset = (scope_Document.dir === 'rtl') || (options.ort === 1) ? 0 : 100;

src/nouislider.core.less

@@ -45,6 +45,12 @@
 	-webkit-transform-origin: 0 0;
 	transform-origin: 0 0;
 }
+/* Offset direction
+ */
+html:not([dir="rtl"]) .@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-origin {
+	left: auto;
+	right: 0;
+}
 
 /* Give origins 0 height/width so they don't interfere with clicking the
  * connect elements.
@@ -56,7 +62,7 @@
 	height: 0;
 }
 .@{noUi-css-prefix}-handle {
-	position: relative;
+	position: absolute;
 }
 .@{noUi-css-prefix}-state-tap .@{noUi-css-prefix}-connect,
 .@{noUi-css-prefix}-state-tap .@{noUi-css-prefix}-origin {
@@ -87,6 +93,10 @@
 	left: -6px;
 	top: -17px;
 }
+html:not([dir="rtl"]) .@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-handle {
+	right: -17px;
+	left: auto;
+}
 
 /* Styling;
  * Giving the connect element a border radius causes issues with using transform: scale

tests/slider.html

@@ -68,6 +68,7 @@
 	<script src="slider_binding.js"></script>
 	<script src="slider_update-numbers.js"></script>
 	<script src="slider_three_or_more_handles.js"></script>
+	<script src="slider_contained_handles.js"></script>
 	<script src="slider_lookaround.js"></script>
 
 	<script src="addon_pips.js"></script>

tests/slider_contained_handles.js

@@ -0,0 +1,67 @@
+	function simulateMousedown(clickTarget, x, y) {
+		// Based on https://stackoverflow.com/a/19570419/1367431
+		var clickEvent= document.createEvent('MouseEvents');
+		clickEvent.initMouseEvent(
+			'mousedown', true, true, window, 0,
+			0, 0, x, y, false, false,
+			false, false, 0, null
+		);
+		clickTarget.dispatchEvent(clickEvent);
+	}
+
+	QUnit.test( "Slider with contained handles", function( assert ){
+
+		Q.innerHTML = '\
+			<div id="slider1" class="contained-handles"></div>\
+			<style>\
+				.noUi-target {\
+				    padding: 0 16px;\
+				}\
+				.noUi-base:before {\
+					content: "";\
+					width: calc(100% + 34px);\
+					height: 100%;\
+					position: absolute;\
+					top: 0;\
+					left: -17px;\
+					display: block;\
+					background: red;\
+				}\
+			</style>\
+		';
+
+		var slider = document.getElementById('slider1');
+
+		noUiSlider.create(slider, {
+			start: 50,
+			connect: [true, false],
+			range: {
+				'min': 0,
+				'max': 100
+			},
+			animate: false,
+			animationDuration: 0
+		});
+
+		// Click the leftmost edge of the bar
+		var rect = slider.getBoundingClientRect(),
+			base = slider.querySelector('.noUi-base'),
+			midY = rect.y + rect.height / 2;
+
+		// These clicks aren't on .noUi-base itself but rather its child pseudo-elements.
+		// The "contained handles" style relies on clickable pseudo-elements. If the click is 
+		// outside the bounds of .noUi-base, it should snap to the end (0% or 100%).
+
+		// Click on leftmost edge of slider. 
+		simulateMousedown(base, rect.x + 1, midY);
+		assert.strictEqual(slider.noUiSlider.get(), '0.00', 'Click near left edge should update value to 0');
+
+		// Click on rightmost edge of slider
+		simulateMousedown(base, rect.x + rect.width - 1, midY);
+		assert.strictEqual(slider.noUiSlider.get(), '100.00', 'Click near right edge should update value to 100');
+
+		// Click leftmost edge again
+		simulateMousedown(base, rect.x + 1, midY);
+		assert.strictEqual(slider.noUiSlider.get(), '0.00', 'Click near left edge should update value to 0');
+
+	});