@inappstory/slide-api 0.0.28 → 0.0.29

package/dist/index.cjs

@@ -3981,6 +3981,7 @@ class WidgetRangeSlider extends WidgetBase {
         create: false,
         localData: {},
         rangeClass: "slider-view",
+        rangeBackgroundClass: "slider-background-view",
         activeClass: "rangeslider--active",
         horizontalClass: "rangeslider--horizontal",
         verticalClass: "rangeslider--vertical",
@@ -4006,6 +4007,7 @@ class WidgetRangeSlider extends WidgetBase {
     fill;
     handle;
     range;
+    rangeBgView;
     DIMENSION;
     DIRECTION;
     DIRECTION_STYLE;
@@ -4048,11 +4050,14 @@ class WidgetRangeSlider extends WidgetBase {
         this.handle = getValueOrException(this.element.querySelector(`.${this.options.handleClass}`), `Empty .${this.options.handleClass}`);
         this.range = getValueOrException(this.element.querySelector(`.${this.options.rangeClass}`), `Empty .${this.options.rangeClass}`);
         this.range.id = this.id;
+        this.rangeBgView = getValueOrException(this.element.querySelector(`.${this.options.rangeBackgroundClass}`), `Empty .${this.options.rangeBackgroundClass}`);
         // if (this.range.classList.contains(this.options['horizontalClass'])) {
         this.orientation = "horizontal";
         // } else if (this.range.classList.contains(this.options['verticalClass'])) {
         //   this.orientation = 'vertical';
         // }
+        // enable expanded tap area (disabled by default for backward compatibility)
+        this.element.classList.add("width-expanded-slider-tap-area");
         this.DIMENSION = constants.orientation[this.orientation].dimension;
         this.DIRECTION = constants.orientation[this.orientation].direction;
         this.DIRECTION_STYLE = constants.orientation[this.orientation].directionStyle[this.layoutDirection];
@@ -4255,8 +4260,9 @@ class WidgetRangeSlider extends WidgetBase {
             this.step = tryParseFloat(this.elementSlider.getAttribute("step"), 1);
         }
         this.handleDimension = getDimension(this.handle, ("offset" + ucfirst(this.DIMENSION)));
-        this.rangeDimension = getDimension(this.range, ("offset" + ucfirst(this.DIMENSION)));
-        this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.rangeDimension = getDimension(this.rangeBgView, ("offset" + ucfirst(this.DIMENSION)));
+        // this.maxHandlePos = this.rangeDimension - this.handleDimension;
+        this.maxHandlePos = this.rangeDimension;
         this.grabPos = this.handleDimension / 2;
         this.position = this.getPositionFromValue(this.value);
         if (updateAttributes) {
@@ -4295,7 +4301,7 @@ class WidgetRangeSlider extends WidgetBase {
         if ((" " + e.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1) {
             return;
         }
-        const pos = this.getRelativePosition(e), rangePos = this.range.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
+        const pos = this.getRelativePosition(e), rangePos = this.rangeBgView.getBoundingClientRect()[this.DIRECTION], handlePos = this.getPositionFromNode(this.handle) - rangePos, setPos = this.orientation === "vertical" ? this.maxHandlePos - (pos - this.grabPos) : pos - this.grabPos;
         this.setPosition(setPos);
         if (pos >= handlePos && pos < handlePos + this.handleDimension) {
             this.grabPos = pos - handlePos;
@@ -4352,11 +4358,14 @@ class WidgetRangeSlider extends WidgetBase {
             uiPos = this.maxHandlePos - uiPos;
         }
         // this.rangeDimension - slider width
-        this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
+        this.fill.style.transform = "translateX(" + (uiPos - this.rangeDimension) + "px)";
+        // this.fill.style.transform = "translateX(" + (uiPos + this.grabPos - this.rangeDimension) + "px)";
         // this.fill.style[this.DIMENSION]         = (uiPos + this.grabPos) + 'px';
         const percentage = this.getPercentageFromValue(value);
         // 1 + (scale - 1) * percentage
-        this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
+        this.handle.style.setProperty("--offset", String(uiPos));
+        this.handle.style.setProperty("--percentage", String(percentage));
+        // this.handle.style.transform = "translateY(-50%) translateX(" + uiPos + "px) scale(calc(1 + (var(--scale-factor, 1) - 1) * " + percentage + "))";
         // this.handle.style[this.DIRECTION_STYLE] = uiPos + 'px';
         this.setValue(value);
         // Update globals