@xenknight/framework7 0.0.5 → 0.0.6

package/components/range/range-class.js

@@ -1,12 +1,10 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 class Range extends Framework7Class {
   constructor(app, params) {
     super(params, [app]);
     const range = this;
-    const support = getSupport();
     const defaults = {
       el: null,
       inputEl: null,
@@ -24,7 +22,8 @@ class Range extends Framework7Class {
       scaleSteps: 5,
       scaleSubSteps: 0,
       formatScaleLabel: null,
-      limitKnobPosition: app.theme === 'ios'
+      limitKnobPosition: true,
+      limitBarPosition: app.theme === 'md'
     };
 
     // Extend defaults with modules params
@@ -72,7 +71,8 @@ class Range extends Framework7Class {
       scale,
       scaleSteps,
       scaleSubSteps,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     } = range.params;
     extend(range, {
       app,
@@ -92,7 +92,8 @@ class Range extends Framework7Class {
       scale,
       scaleSteps,
       scaleSubSteps,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     });
     if ($inputEl) {
       'step min max'.split(' ').forEach(paramName => {
@@ -208,13 +209,15 @@ class Range extends Framework7Class {
       rangeOffsetLeft = rangeOffset.left;
       rangeOffsetTop = rangeOffset.top;
       let progress;
+      const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
+      const progressModify = limitKnobPosition ? knobSize : 0;
       if (range.vertical) {
-        progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
+        progress = (touchesStart.y - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
         if (!range.verticalReversed) progress = 1 - progress;
       } else if (range.app.rtl) {
-        progress = (rangeOffsetLeft + range.rangeWidth - touchesStart.x) / range.rangeWidth;
+        progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - touchesStart.x) / (range.rangeWidth - progressModify);
       } else {
-        progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
+        progress = (touchesStart.x - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
       }
       let newValue = progress * (range.max - range.min) + range.min;
       if (range.dual) {
@@ -262,13 +265,15 @@ class Range extends Framework7Class {
       }
       e.preventDefault();
       let progress;
+      const knobSize = range.vertical ? range.knobHeight : range.knobWidth;
+      const progressModify = limitKnobPosition ? knobSize : 0;
       if (range.vertical) {
-        progress = (pageY - rangeOffsetTop) / range.rangeHeight;
+        progress = (pageY - rangeOffsetTop - progressModify / 2) / (range.rangeHeight - progressModify);
         if (!range.verticalReversed) progress = 1 - progress;
       } else if (range.app.rtl) {
-        progress = (rangeOffsetLeft + range.rangeWidth - pageX) / range.rangeWidth;
+        progress = (rangeOffsetLeft + range.rangeWidth + progressModify / 2 - pageX) / (range.rangeWidth - progressModify);
       } else {
-        progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
+        progress = (pageX - rangeOffsetLeft - progressModify / 2) / (range.rangeWidth - progressModify);
       }
       let newValue = progress * (range.max - range.min) + range.min;
       if (range.dual) {
@@ -326,10 +331,9 @@ class Range extends Framework7Class {
     let parentPanel;
     let parentPage;
     range.attachEvents = function attachEvents() {
-      const passive = support.passiveListener ? {
+      range.$el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      range.$el.on(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       app.on('tabShow', handleResize);
@@ -342,10 +346,9 @@ class Range extends Framework7Class {
       parentPage.on('page:reinit', handleResize);
     };
     range.detachEvents = function detachEvents() {
-      const passive = support.passiveListener ? {
+      range.$el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      range.$el.off(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.off('touchmove', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       app.off('tabShow', handleResize);
@@ -402,7 +405,8 @@ class Range extends Framework7Class {
       labels,
       vertical,
       verticalReversed,
-      limitKnobPosition
+      limitKnobPosition,
+      limitBarPosition
     } = range;
     const knobSize = vertical ? knobHeight : knobWidth;
     const rangeSize = vertical ? rangeHeight : rangeWidth;
@@ -410,28 +414,31 @@ class Range extends Framework7Class {
     const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
     if (range.dual) {
       const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
+      const positionStartProgress = limitBarPosition ? knobSize / rangeSize : 0;
+      const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
       $barActiveEl.css({
-        [positionProperty]: `${progress[0] * 100}%`,
-        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`
+        [positionProperty]: `${(positionStartProgress + progress[0] * barProgressModify) * 100}%`,
+        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0] - positionStartProgress) * 100 * barProgressModify}%`
       });
       knobs.forEach(($knobEl, knobIndex) => {
         let startPos = rangeSize * progress[knobIndex];
         if (limitKnobPosition) {
-          const realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
-          if (realStartPos < 0) startPos = knobSize / 2;
-          if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
+          const minPos = knobSize;
+          const maxPos = rangeSize;
+          startPos = (maxPos - minPos) * progress[knobIndex] + knobSize / 2;
         }
         $knobEl.css(positionProperty, `${startPos}px`);
         if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
       });
     } else {
       const progress = (value - min) / (max - min);
-      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
+      const barProgressModify = limitBarPosition ? (rangeSize - knobSize) / rangeSize : 1;
+      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100 * barProgressModify}%`);
       let startPos = rangeSize * progress;
       if (limitKnobPosition) {
-        const realStartPos = rangeSize * progress - knobSize / 2;
-        if (realStartPos < 0) startPos = knobSize / 2;
-        if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
+        const minPos = knobSize;
+        const maxPos = rangeSize;
+        startPos = (maxPos - minPos) * progress + knobSize / 2;
       }
       knobs[0].css(positionProperty, `${startPos}px`);
       if (label) labels[0].text(range.formatLabel(value, labels[0][0]));

package/components/range/range-ios.less

@@ -1,9 +1,69 @@
 .ios {
+  .range-bar-active {
+    border-radius: inherit;
+  }
+  .range-knob {
+    border-radius: var(--f7-range-knob-height);
+    transition-duration: 300ms;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 44px;
+      height: 44px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+    &::before {
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      transition-duration: 300ms;
+      box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
+      left: 50%;
+      top: 50%;
+      margin-left: -0.5px;
+      margin-top: -0.5px;
+    }
+    &::after {
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      transition-duration: 300ms;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
   .range-knob-label {
     margin-bottom: 6px;
     transform: translateX(-50%) translateY(100%) scale(0);
+    z-index: 2;
   }
   .range-knob-active-state .range-knob-label {
     transform: translateX(-50%) translateY(0%) scale(1);
   }
+  .range-knob-active-state {
+    .range-knob {
+      background: transparent;
+      transform: scale(1.4);
+      &::before {
+        opacity: 1;
+      }
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
 }

package/components/range/range-md.less

@@ -1,10 +1,29 @@
 .md {
+  .range-knob-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .range-knob {
     transition-duration: 200ms;
     transition-property: transform, background-color;
+    width: 4px;
+    height: var(--f7-range-knob-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
   }
+
   .range-knob-active-state .range-knob {
-    transform: scale(1.5);
+    transform: scaleX(0.5);
+  }
+  .range-slider-vertical .range-knob {
+    width: var(--f7-range-knob-height);
+    height: 4px;
+  }
+  .range-slider-vertical .range-knob-active-state .range-knob {
+    transform: scaleY(0.5);
   }
   .range-slider-min:not(.range-slider-dual) {
     .range-knob {
@@ -33,9 +52,53 @@
   .range-knob-active-state .range-knob-label {
     transform: translateY(0%) scale(1);
   }
-  .range-slider-label {
-    .range-knob-active-state .range-knob {
-      transform: scale(0);
+  .range-bar-active,
+  .range-bar-inactive {
+    border-radius: 4px;
+  }
+  .range-slider {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--f7-range-knob-color);
+      top: calc(50% - 2px);
+      z-index: 1;
+      pointer-events: none;
+      transition-duration: 200ms;
+    }
+    &::before {
+      left: calc(var(--f7-range-knob-width) / 2 - 2px);
+    }
+    &::after {
+      right: calc(var(--f7-range-knob-width) / 2 - 2px);
+    }
+    &:not(.range-slider-dual)::before {
+      content: none;
+      display: none;
+    }
+    &:has(.range-knob-active-state) {
+      &::before,
+      &::after {
+        transform: scale(0.5);
+      }
+    }
+    &.range-slider-vertical {
+      &::before,
+      &::after {
+        top: auto;
+        left: calc(50% - 2px);
+        right: auto;
+      }
+      &::before {
+        bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
+      }
+      &::after {
+        top: calc(var(--f7-range-knob-width) / 2 - 2px);
+      }
     }
   }
 }

package/components/range/range-rtl.css

@@ -1 +1 @@
-:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}:root .dark,:root.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.ios{--f7-range-size:28px;--f7-range-bar-size:4px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:28px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 2px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md{--f7-range-size:20px;--f7-range-bar-size:2px;--f7-range-bar-border-radius:0px;--f7-range-knob-size:12px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{right:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-size);width:var(--f7-range-knob-size)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2);margin-right:calc(-1 * var(--f7-range-knob-size)/ 2);right:0}.range-slider-vertical .range-knob-wrap{left:50%;margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-knob{box-sizing:border-box;border-radius:50%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-right:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color}.md .range-knob-active-state .range-knob{transform:scale(1.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-slider-label .range-knob-active-state .range-knob{transform:scale(0)}
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{right:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-right:calc(-1 * var(--f7-range-knob-width)/ 2);right:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-right:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}

package/components/range/range-vars.less

@@ -7,18 +7,13 @@
   --f7-range-scale-step-height: 5px;
   --f7-range-scale-substep-width: 1px;
   --f7-range-scale-substep-height: 4px;
-  .light-vars({
-    --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
-  });
-  .dark-vars({
-    --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
-  });
 }
 .ios-vars({
   --f7-range-size: 28px;
-  --f7-range-bar-size: 4px;
-  --f7-range-bar-border-radius: 2px;
-  --f7-range-knob-size: 28px;
+  --f7-range-bar-size: 6px;
+  --f7-range-bar-border-radius: 6px;
+  --f7-range-knob-width: 38px;
+  --f7-range-knob-height: 24px;
   --f7-range-knob-color: #fff;
   --f7-range-knob-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
   --f7-range-label-size: 24px;
@@ -27,7 +22,7 @@
   --f7-range-label-font-size: 12px;
   --f7-range-label-font-weight: 500;
   --f7-range-label-border-radius: 5px;
-  --f7-range-label-padding: 0px 2px;
+  --f7-range-label-padding: 0px 4px;
 
 
   --f7-range-scale-text-color: #666;
@@ -35,12 +30,21 @@
   --f7-range-scale-font-size: 12px;
   --f7-range-scale-font-weight: 400;
   --f7-range-scale-label-offset: 4px;
+
+  .light-vars({
+    --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
+  });
+  .dark-vars({
+    --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
+  });
 });
 .md-vars({
   --f7-range-size: 20px;
-  --f7-range-bar-size: 2px;
-  --f7-range-bar-border-radius: 0px;
-  --f7-range-knob-size: 12px;
+
+  --f7-range-bar-size: 16px;
+  --f7-range-bar-border-radius: 16px;
+  --f7-range-knob-width: 16px;
+  --f7-range-knob-height: 44px;
   --f7-range-knob-box-shadow: none;
   --f7-range-label-size: 26px;
   --f7-range-label-font-weight: normal;
@@ -54,6 +58,7 @@
   --f7-range-scale-label-offset: 4px;
 });
 .md-color-vars({
+  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
   --f7-range-knob-color: var(--f7-theme-color);
   --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);

package/components/range/range.css

@@ -1 +1 @@
-:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}:root .dark,:root.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.ios{--f7-range-size:28px;--f7-range-bar-size:4px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:28px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 2px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md{--f7-range-size:20px;--f7-range-bar-size:2px;--f7-range-bar-border-radius:0px;--f7-range-knob-size:12px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-size);width:var(--f7-range-knob-size)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2);margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-knob{box-sizing:border-box;border-radius:50%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color}.md .range-knob-active-state .range-knob{transform:scale(1.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-slider-label .range-knob-active-state .range-knob{transform:scale(0)}
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-left:calc(-1 * var(--f7-range-knob-width)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}

package/components/range/range.d.ts

@@ -39,8 +39,10 @@ export namespace Range {
     scaleSubSteps?: number;
     /** Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step. */
     formatScaleLabel?: (value: number) => string;
-    /** Limit knob position to the size of range bar. By default enabled from iOS theme */
+    /** Limit knob position to the size of range bar. By default enabled */
     limitKnobPosition?: boolean;
+    /** Limit bar position to the size of range knob. By default enabled for MD theme */
+    limitBarPosition?: boolean;
     /** Object with events handlers.. */
     on?: {
       [event in keyof Events]?: Events[event];

package/components/range/range.less

@@ -64,55 +64,42 @@
 .range-knob-wrap {
   z-index: 20;
   position: absolute;
-  height: var(--f7-range-knob-size);
-  width: var(--f7-range-knob-size);
+  height: var(--f7-range-knob-height);
+  width: var(--f7-range-knob-width);
 
   .range-slider-horizontal & {
     top: 50%;
-    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-top: calc(-1 * var(--f7-range-knob-height) / 2);
     .ltr({
-      margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+      margin-left: calc(-1 * var(--f7-range-knob-width) / 2);
       left: 0;
     });
     .rtl({
-      margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
+      margin-right: calc(-1 * var(--f7-range-knob-width) / 2);
       right: 0;
     });
   }
   .range-slider-vertical & {
     left: 50%;
-    margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+    height: var(--f7-range-knob-width);
+    width: var(--f7-range-knob-height);
+    margin-left: calc(-1 * var(--f7-range-knob-height) / 2);
     bottom: 0;
-    margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-bottom: calc(-1 * var(--f7-range-knob-width) / 2);
   }
   .range-slider-vertical-reversed & {
     bottom: auto;
     top: 0;
     margin-bottom: 0;
-    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-top: calc(-1 * var(--f7-range-knob-width) / 2);
   }
 }
 .range-knob {
   box-sizing: border-box;
-  border-radius: 50%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+
   z-index: 1;
   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
   box-shadow: var(--f7-range-knob-box-shadow);
-  &:after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 44px;
-    height: 44px;
-    margin-left: -22px;
-    margin-top: -22px;
-  }
 }
 .range-knob-label {
   position: absolute;

package/components/swipeout/swipeout-ios.less

@@ -1,2 +1,39 @@
 .ios {
+  .swipeout-actions-right {
+    right: 0%;
+  }
+  .swipeout-actions-left {
+    left: 0%;
+  }
+  .swipeout-actions-left,
+  .swipeout-actions-right {
+    padding: 0 10px;
+    gap: 10px;
+    align-items: center;
+    > a,
+    > button,
+    > span,
+    > div {
+      transform: scale(0);
+      padding: var(--f7-swipeout-button-padding-vertical)
+        var(--f7-swipeout-button-padding-horizontal);
+    }
+  }
+  .swipeout-opened,
+  .swipeout-active {
+    .swipeout-content {
+      background-color: var(--f7-swipeout-active-bg-color);
+      border-radius: var(--f7-swipeout-active-border-radius);
+    }
+    .item-content {
+      border-radius: var(--f7-swipeout-active-border-radius);
+    }
+    .swipeout-content .item-inner::after {
+      opacity: 0;
+    }
+  }
+  .swipeout-overswipe {
+    transition-duration: 200ms;
+    transition-property: transform, left, width, margin-left, margin-right;
+  }
 }

package/components/swipeout/swipeout-md.less

@@ -1,2 +1,58 @@
 .md {
+  .swipeout-actions-left,
+  .swipeout-actions-right {
+    > a,
+    > button,
+    > span,
+    > div {
+      &:after {
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 600%;
+        height: 100%;
+        background: inherit;
+        z-index: -1;
+        transform: translate3d(0, 0, 0);
+        pointer-events: none;
+      }
+    }
+  }
+  .swipeout-actions-right {
+    right: 0%;
+    transform: translateX(calc(100% + 1px));
+    > a,
+    > button,
+    > span,
+    > div {
+      &:after {
+        left: 100%;
+      }
+      &:last-child {
+        padding-right: calc(
+          var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right)
+        );
+      }
+    }
+  }
+  .swipeout-actions-left {
+    left: 0%;
+    transform: translateX(calc(-100% - 1px));
+    > a,
+    > button,
+    > span,
+    > div {
+      &:after {
+        right: 100%;
+      }
+      &:first-child {
+        padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
+      }
+    }
+  }
+
+  .swipeout-overswipe {
+    transition-property: left;
+  }
 }

package/components/swipeout/swipeout-rtl.css

@@ -1 +1 @@
-:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-padding-horizontal:30px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit}.md{--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s;transition-property:left}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after,.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{left:100%}.swipeout-actions-right>a:last-child,.swipeout-actions-right>button:last-child,.swipeout-actions-right>div:last-child,.swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after{right:100%}.swipeout-actions-left>a:first-child,.swipeout-actions-left>button:first-child,.swipeout-actions-left>div:first-child,.swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}
+:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-border-radius:48px;--f7-swipeout-button-padding-vertical:10px;--f7-swipeout-button-padding-horizontal:16px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit;--f7-swipeout-active-border-radius:16px;--f7-swipeout-active-bg-color:#eee}.ios .dark,.ios.dark{--f7-swipeout-active-bg-color:#2c2c2e}.md{--f7-swipeout-button-border-radius:0px;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-content .item-inner::after{transition-duration:.3s;transition-property:transform,left,background-color,border-radius,opacity}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left,width,margin-left,margin-right}.swipeout-transitioning:not(.swipeout-opened) .swipeout-content{transition-delay:0s,0s,0.3s,0.3s,0s}.list li:has( + li:is(.swipeout-opened,.swipeout-active)) .item-inner::after{opacity:0;transition-duration:.3s}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{box-sizing:border-box;border-radius:var(--f7-swipeout-button-border-radius);color:var(--f7-swipeout-button-text-color);background:var(--f7-swipeout-button-bg-color);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}.ios .swipeout-actions-right{right:0%}.ios .swipeout-actions-left{left:0%}.ios .swipeout-actions-left,.ios .swipeout-actions-right{padding:0 10px;gap:10px;align-items:center}.ios .swipeout-actions-left>a,.ios .swipeout-actions-left>button,.ios .swipeout-actions-left>div,.ios .swipeout-actions-left>span,.ios .swipeout-actions-right>a,.ios .swipeout-actions-right>button,.ios .swipeout-actions-right>div,.ios .swipeout-actions-right>span{transform:scale(0);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal)}.ios .swipeout-active .swipeout-content,.ios .swipeout-opened .swipeout-content{background-color:var(--f7-swipeout-active-bg-color);border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .item-content,.ios .swipeout-opened .item-content{border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .swipeout-content .item-inner::after,.ios .swipeout-opened .swipeout-content .item-inner::after{opacity:0}.ios .swipeout-overswipe{transition-duration:.2s;transition-property:transform,left,width,margin-left,margin-right}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after,.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.md .swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{left:100%}.md .swipeout-actions-right>a:last-child,.md .swipeout-actions-right>button:last-child,.md .swipeout-actions-right>div:last-child,.md .swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.md .swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after{right:100%}.md .swipeout-actions-left>a:first-child,.md .swipeout-actions-left>button:first-child,.md .swipeout-actions-left>div:first-child,.md .swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.md .swipeout-overswipe{transition-property:left}