diff --git a/src/nouislider.core.less b/src/nouislider.core.less index 8db6307b..48b0446f 100644 --- a/src/nouislider.core.less +++ b/src/nouislider.core.less @@ -39,20 +39,14 @@ z-index: 1; top: 0; right: 0; + height: 100%; + width: 100%; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } -.@{noUi-css-prefix}-connect { - height: 100%; - width: 100%; -} -.@{noUi-css-prefix}-origin { - height: 10%; - width: 10%; -} /* Offset direction */ @@ -65,6 +59,7 @@ * connect elements. */ .@{noUi-css-prefix}-vertical .@{noUi-css-prefix}-origin { + top: -100%; width: 0; } .@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-origin { @@ -106,7 +101,7 @@ width: 28px; height: 34px; right: -6px; - top: -17px; + bottom: -17px; } .@{noUi-css-prefix}-txt-dir-rtl.@{noUi-css-prefix}-horizontal .@{noUi-css-prefix}-handle { left: -17px; diff --git a/src/nouislider.ts b/src/nouislider.ts index 2c149235..155451d0 100644 --- a/src/nouislider.ts +++ b/src/nouislider.ts @@ -2604,7 +2604,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O // Convert the value to the slider stepping/range. scope_Values[handleNumber] = scope_Spectrum.fromStepping(to); - const translation = 10 * (transformDirection(to, 0) - scope_DirOffset); + const translation = transformDirection(to, 0) - scope_DirOffset; const translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")"; (scope_Handles[handleNumber].style as CSSStyleDeclarationIE10)[options.transformRule] = translateRule; diff --git a/tests/origin.html b/tests/origin.html new file mode 100644 index 00000000..d1182157 --- /dev/null +++ b/tests/origin.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + diff --git a/tests/slider_three_or_more_handles.js b/tests/slider_three_or_more_handles.js index 108c0067..169bd773 100644 --- a/tests/slider_three_or_more_handles.js +++ b/tests/slider_three_or_more_handles.js @@ -54,7 +54,7 @@ QUnit.test("Slider with three or more handles", function (assert) { var middleHandleX = (middleHandlePos.right + middleHandlePos.left) / 2; var middleHandleY = (middleHandlePos.top + middleHandlePos.bottom) / 2; var selectedByClick = document.elementFromPoint(middleHandleX, middleHandleY); - assert.strictEqual(selectedByClick, middleHandle, "Middle handle should be selected by click as rightmost handle is unmovable move"); + assert.strictEqual(selectedByClick, middleHandle.querySelector('.noUi-touch-area'), "Middle handle should be selected by click as rightmost handle is unmovable move"); // xnakos also spotted a bug where clicking