framework7 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/range/range-class.js

@@ -1,26 +1,14 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import $ from '../../shared/dom7';
 import { extend, nextTick, deleteProps } from '../../shared/utils';
 import Framework7Class from '../../shared/class';
 import { getSupport } from '../../shared/get-support';
 
-var Range = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Range, _Framework7Class);
-
-  function Range(app, params) {
-    var _this;
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var range = _assertThisInitialized(_this);
-
-    var support = getSupport();
-    var defaults = {
+class Range extends Framework7Class {
+  constructor(app, params) {
+    super(params, [app]);
+    const range = this;
+    const support = getSupport();
+    const defaults = {
       el: null,
       inputEl: null,
       dual: false,
@@ -42,18 +30,18 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     range.useModulesParams(defaults);
     range.params = extend(defaults, params);
-    var el = range.params.el;
-    if (!el) return range || _assertThisInitialized(_this);
-    var $el = $(el);
-    if ($el.length === 0) return range || _assertThisInitialized(_this);
-    if ($el[0].f7Range) return $el[0].f7Range || _assertThisInitialized(_this);
-    var dataset = $el.dataset();
-    'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(function (paramName) {
+    const el = range.params.el;
+    if (!el) return range;
+    const $el = $(el);
+    if ($el.length === 0) return range;
+    if ($el[0].f7Range) return $el[0].f7Range;
+    const dataset = $el.dataset();
+    'step min max value scaleSteps scaleSubSteps'.split(' ').forEach(paramName => {
       if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {
         range.params[paramName] = parseFloat(dataset[paramName]);
       }
     });
-    'dual label vertical verticalReversed scale'.split(' ').forEach(function (paramName) {
+    'dual label vertical verticalReversed scale'.split(' ').forEach(paramName => {
       if (typeof params[paramName] === 'undefined' && typeof dataset[paramName] !== 'undefined') {
         range.params[paramName] = dataset[paramName];
       }
@@ -67,7 +55,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (!range.params.dual) {
       if (range.params.inputEl) {
@@ -77,42 +65,43 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var _range$params = range.params,
-        dual = _range$params.dual,
-        step = _range$params.step,
-        label = _range$params.label,
-        min = _range$params.min,
-        max = _range$params.max,
-        value = _range$params.value,
-        vertical = _range$params.vertical,
-        verticalReversed = _range$params.verticalReversed,
-        scale = _range$params.scale,
-        scaleSteps = _range$params.scaleSteps,
-        scaleSubSteps = _range$params.scaleSubSteps,
-        limitKnobPosition = _range$params.limitKnobPosition;
+    const {
+      dual,
+      step,
+      label,
+      min,
+      max,
+      value,
+      vertical,
+      verticalReversed,
+      scale,
+      scaleSteps,
+      scaleSubSteps,
+      limitKnobPosition
+    } = range.params;
     extend(range, {
-      app: app,
-      $el: $el,
+      app,
+      $el,
       el: $el[0],
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl ? $inputEl[0] : undefined,
-      dual: dual,
-      step: step,
-      label: label,
-      min: min,
-      max: max,
-      value: value,
+      dual,
+      step,
+      label,
+      min,
+      max,
+      value,
       previousValue: value,
-      vertical: vertical,
-      verticalReversed: verticalReversed,
-      scale: scale,
-      scaleSteps: scaleSteps,
-      scaleSubSteps: scaleSubSteps,
-      limitKnobPosition: limitKnobPosition
+      vertical,
+      verticalReversed,
+      scale,
+      scaleSteps,
+      scaleSubSteps,
+      limitKnobPosition
     });
 
     if ($inputEl) {
-      'step min max'.split(' ').forEach(function (paramName) {
+      'step min max'.split(' ').forEach(paramName => {
         if (!params[paramName] && $inputEl.attr(paramName)) {
           range.params[paramName] = parseFloat($inputEl.attr(paramName));
           range[paramName] = parseFloat($inputEl.attr(paramName));
@@ -146,24 +135,29 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } // Check for layout
 
 
-    var $barEl = $('<div class="range-bar"></div>');
-    var $barActiveEl = $('<div class="range-bar-active"></div>');
+    const $barEl = $('<div class="range-bar"></div>');
+    const $barActiveEl = $('<div class="range-bar-active"></div>');
     $barEl.append($barActiveEl); // Create Knobs
     // prettier-ignore
 
-    var knobHTML = "\n      <div class=\"range-knob-wrap\">\n        <div class=\"range-knob\"></div>\n        " + (range.label ? '<div class="range-knob-label"></div>' : '') + "\n      </div>\n    ";
-    var knobs = [$(knobHTML)];
+    const knobHTML = `
+      <div class="range-knob-wrap">
+        <div class="range-knob"></div>
+        ${range.label ? '<div class="range-knob-label"></div>' : ''}
+      </div>
+    `;
+    const knobs = [$(knobHTML)];
 
     if (range.dual) {
       knobs.push($(knobHTML));
     }
 
     $el.append($barEl);
-    knobs.forEach(function ($knobEl) {
+    knobs.forEach($knobEl => {
       $el.append($knobEl);
     }); // Labels
 
-    var labels = [];
+    const labels = [];
 
     if (range.label) {
       labels.push(knobs[0].find('.range-knob-label'));
@@ -174,32 +168,36 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } // Scale
 
 
-    var $scaleEl;
+    let $scaleEl;
 
     if (range.scale && range.scaleSteps >= 1) {
-      $scaleEl = $("\n        <div class=\"range-scale\">\n          " + range.renderScale() + "\n        </div>\n      ");
+      $scaleEl = $(`
+        <div class="range-scale">
+          ${range.renderScale()}
+        </div>
+      `);
       $el.append($scaleEl);
     }
 
     extend(range, {
-      knobs: knobs,
-      labels: labels,
-      $barEl: $barEl,
-      $barActiveEl: $barActiveEl,
-      $scaleEl: $scaleEl
+      knobs,
+      labels,
+      $barEl,
+      $barActiveEl,
+      $scaleEl
     });
     $el[0].f7Range = range; // Touch Events
 
-    var isTouched;
-    var touchesStart = {};
-    var isScrolling;
-    var rangeOffset;
-    var rangeOffsetLeft;
-    var rangeOffsetTop;
-    var $touchedKnobEl;
-    var dualValueIndex;
-    var valueChangedByTouch;
-    var targetTouchIdentifier;
+    let isTouched;
+    const touchesStart = {};
+    let isScrolling;
+    let rangeOffset;
+    let rangeOffsetLeft;
+    let rangeOffsetTop;
+    let $touchedKnobEl;
+    let dualValueIndex;
+    let valueChangedByTouch;
+    let targetTouchIdentifier;
 
     function onTouchChange() {
       valueChangedByTouch = true;
@@ -227,7 +225,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       rangeOffset = $el.offset();
       rangeOffsetLeft = rangeOffset.left;
       rangeOffsetTop = rangeOffset.top;
-      var progress;
+      let progress;
 
       if (range.vertical) {
         progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
@@ -238,7 +236,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
       }
 
-      var newValue = progress * (range.max - range.min) + range.min;
+      let newValue = progress * (range.max - range.min) + range.min;
 
       if (range.dual) {
         if (Math.abs(range.value[0] - newValue) < Math.abs(range.value[1] - newValue)) {
@@ -255,7 +253,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         newValue = progress * (range.max - range.min) + range.min;
       }
 
-      nextTick(function () {
+      nextTick(() => {
         if (isTouched) $touchedKnobEl.addClass('range-knob-active-state');
       }, 70);
       range.on('change', onTouchChange);
@@ -264,11 +262,11 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchMove(e) {
       if (!isTouched) return;
-      var pageX;
-      var pageY;
+      let pageX;
+      let pageY;
 
       if (e.type === 'touchmove') {
-        for (var i = 0; i < e.targetTouches.length; i += 1) {
+        for (let i = 0; i < e.targetTouches.length; i += 1) {
           if (e.targetTouches[i].identifier === targetTouchIdentifier) {
             pageX = e.targetTouches[i].pageX;
             pageY = e.targetTouches[i].pageY;
@@ -291,7 +289,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       }
 
       e.preventDefault();
-      var progress;
+      let progress;
 
       if (range.vertical) {
         progress = (pageY - rangeOffsetTop) / range.rangeHeight;
@@ -302,11 +300,11 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
         progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
       }
 
-      var newValue = progress * (range.max - range.min) + range.min;
+      let newValue = progress * (range.max - range.min) + range.min;
 
       if (range.dual) {
-        var leftValue;
-        var rightValue;
+        let leftValue;
+        let rightValue;
 
         if (dualValueIndex === 0) {
           leftValue = newValue;
@@ -332,9 +330,9 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     function handleTouchEnd(e) {
       if (e.type === 'touchend') {
-        var touchEnded;
+        let touchEnded;
 
-        for (var i = 0; i < e.changedTouches.length; i += 1) {
+        for (let i = 0; i < e.changedTouches.length; i += 1) {
           if (e.changedTouches[i].identifier === targetTouchIdentifier) touchEnded = true;
         }
 
@@ -370,12 +368,12 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
       range.layout();
     }
 
-    var parentModals;
-    var parentPanel;
-    var parentPage;
+    let parentModals;
+    let parentPanel;
+    let parentPage;
 
     range.attachEvents = function attachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       range.$el.on(app.touchEvents.start, handleTouchStart, passive);
@@ -392,7 +390,7 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     };
 
     range.detachEvents = function detachEvents() {
-      var passive = support.passiveListener ? {
+      const passive = support.passiveListener ? {
         passive: true
       } : false;
       range.$el.off(app.touchEvents.start, handleTouchStart, passive);
@@ -422,79 +420,79 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     range.useModules(); // Init
 
     range.init();
-    return range || _assertThisInitialized(_this);
+    return range;
   }
 
-  var _proto = Range.prototype;
-
-  _proto.calcSize = function calcSize() {
-    var range = this;
+  calcSize() {
+    const range = this;
 
     if (range.vertical) {
-      var height = range.$el.outerHeight();
+      const height = range.$el.outerHeight();
       if (height === 0) return;
       range.rangeHeight = height;
       range.knobHeight = range.knobs[0].outerHeight();
     } else {
-      var width = range.$el.outerWidth();
+      const width = range.$el.outerWidth();
       if (width === 0) return;
       range.rangeWidth = width;
       range.knobWidth = range.knobs[0].outerWidth();
     }
-  };
-
-  _proto.layout = function layout() {
-    var range = this;
-    var app = range.app,
-        knobWidth = range.knobWidth,
-        knobHeight = range.knobHeight,
-        rangeWidth = range.rangeWidth,
-        rangeHeight = range.rangeHeight,
-        min = range.min,
-        max = range.max,
-        knobs = range.knobs,
-        $barActiveEl = range.$barActiveEl,
-        value = range.value,
-        label = range.label,
-        labels = range.labels,
-        vertical = range.vertical,
-        verticalReversed = range.verticalReversed,
-        limitKnobPosition = range.limitKnobPosition;
-    var knobSize = vertical ? knobHeight : knobWidth;
-    var rangeSize = vertical ? rangeHeight : rangeWidth; // eslint-disable-next-line
-
-    var positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
+  }
 
-    if (range.dual) {
-      var _$barActiveEl$css;
+  layout() {
+    const range = this;
+    const {
+      app,
+      knobWidth,
+      knobHeight,
+      rangeWidth,
+      rangeHeight,
+      min,
+      max,
+      knobs,
+      $barActiveEl,
+      value,
+      label,
+      labels,
+      vertical,
+      verticalReversed,
+      limitKnobPosition
+    } = range;
+    const knobSize = vertical ? knobHeight : knobWidth;
+    const rangeSize = vertical ? rangeHeight : rangeWidth; // eslint-disable-next-line
+
+    const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
 
-      var progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
-      $barActiveEl.css((_$barActiveEl$css = {}, _$barActiveEl$css[positionProperty] = progress[0] * 100 + "%", _$barActiveEl$css[vertical ? 'height' : 'width'] = (progress[1] - progress[0]) * 100 + "%", _$barActiveEl$css));
-      knobs.forEach(function ($knobEl, knobIndex) {
-        var startPos = rangeSize * progress[knobIndex];
+    if (range.dual) {
+      const progress = [(value[0] - min) / (max - min), (value[1] - min) / (max - min)];
+      $barActiveEl.css({
+        [positionProperty]: `${progress[0] * 100}%`,
+        [vertical ? 'height' : 'width']: `${(progress[1] - progress[0]) * 100}%`
+      });
+      knobs.forEach(($knobEl, knobIndex) => {
+        let startPos = rangeSize * progress[knobIndex];
 
         if (limitKnobPosition) {
-          var realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
+          const realStartPos = rangeSize * progress[knobIndex] - knobSize / 2;
           if (realStartPos < 0) startPos = knobSize / 2;
           if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
         }
 
-        $knobEl.css(positionProperty, startPos + "px");
+        $knobEl.css(positionProperty, `${startPos}px`);
         if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
       });
     } else {
-      var _progress = (value - min) / (max - min);
-
-      $barActiveEl.css(vertical ? 'height' : 'width', _progress * 100 + "%");
-      var startPos = rangeSize * _progress;
+      const progress = (value - min) / (max - min);
+      $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
+      let startPos = rangeSize * progress;
 
       if (limitKnobPosition) {
-        var realStartPos = rangeSize * _progress - knobSize / 2;
+        const realStartPos = rangeSize * progress - knobSize / 2;
         if (realStartPos < 0) startPos = knobSize / 2;
         if (realStartPos + knobSize > rangeSize) startPos = rangeSize - knobSize / 2;
       }
 
-      knobs[0].css(positionProperty, startPos + "px");
+      knobs[0].css(positionProperty, `${startPos}px`);
       if (label) labels[0].text(range.formatLabel(value, labels[0][0]));
     }
 
@@ -509,41 +507,41 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     } else {
       range.$el.removeClass('range-slider-max');
     }
-  };
+  }
 
-  _proto.setValue = function setValue(newValue, byTouchMove) {
-    var range = this;
-    var step = range.step,
-        min = range.min,
-        max = range.max;
-    var valueChanged;
-    var oldValue;
+  setValue(newValue, byTouchMove) {
+    const range = this;
+    const {
+      step,
+      min,
+      max
+    } = range;
+    let valueChanged;
+    let oldValue;
 
     if (range.dual) {
       oldValue = [range.value[0], range.value[1]];
-      var newValues = newValue;
+      let newValues = newValue;
       if (!Array.isArray(newValues)) newValues = [newValue, newValue];
 
       if (newValue[0] > newValue[1]) {
         newValues = [newValues[0], newValues[0]];
       }
 
-      newValues = newValues.map(function (value) {
-        return Math.max(Math.min(Math.round(value / step) * step, max), min);
-      });
+      newValues = newValues.map(value => Math.max(Math.min(Math.round(value / step) * step, max), min));
 
       if (newValues[0] === range.value[0] && newValues[1] === range.value[1]) {
         return range;
       }
 
-      newValues.forEach(function (value, valueIndex) {
+      newValues.forEach((value, valueIndex) => {
         range.value[valueIndex] = value;
       });
       valueChanged = oldValue[0] !== newValues[0] || oldValue[1] !== newValues[1];
       range.layout();
     } else {
       oldValue = range.value;
-      var value = Math.max(Math.min(Math.round(newValue / step) * step, max), min);
+      const value = Math.max(Math.min(Math.round(newValue / step) * step, max), min);
       range.value = value;
       range.layout();
       valueChanged = oldValue !== value;
@@ -574,56 +572,58 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
 
     range.emit('local::change rangeChange', range, range.value);
     return range;
-  };
+  }
 
-  _proto.getValue = function getValue() {
+  getValue() {
     return this.value;
-  };
+  }
 
-  _proto.formatLabel = function formatLabel(value, labelEl) {
-    var range = this;
+  formatLabel(value, labelEl) {
+    const range = this;
     if (range.params.formatLabel) return range.params.formatLabel.call(range, value, labelEl);
     return value;
-  };
+  }
 
-  _proto.formatScaleLabel = function formatScaleLabel(value) {
-    var range = this;
+  formatScaleLabel(value) {
+    const range = this;
     if (range.params.formatScaleLabel) return range.params.formatScaleLabel.call(range, value);
     return value;
-  };
+  }
 
-  _proto.renderScale = function renderScale() {
-    var range = this;
-    var app = range.app,
-        verticalReversed = range.verticalReversed,
-        vertical = range.vertical; // eslint-disable-next-line
+  renderScale() {
+    const range = this;
+    const {
+      app,
+      verticalReversed,
+      vertical
+    } = range; // eslint-disable-next-line
 
-    var positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
-    var html = '';
+    const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
+    let html = '';
     Array.from({
       length: range.scaleSteps + 1
-    }).forEach(function (scaleEl, index) {
-      var scaleStepValue = (range.max - range.min) / range.scaleSteps;
-      var scaleValue = range.min + scaleStepValue * index;
-      var progress = (scaleValue - range.min) / (range.max - range.min);
-      html += "<div class=\"range-scale-step\" style=\"" + positionProperty + ": " + progress * 100 + "%\">" + range.formatScaleLabel(scaleValue) + "</div>";
+    }).forEach((scaleEl, index) => {
+      const scaleStepValue = (range.max - range.min) / range.scaleSteps;
+      const scaleValue = range.min + scaleStepValue * index;
+      const progress = (scaleValue - range.min) / (range.max - range.min);
+      html += `<div class="range-scale-step" style="${positionProperty}: ${progress * 100}%">${range.formatScaleLabel(scaleValue)}</div>`;
 
       if (range.scaleSubSteps && range.scaleSubSteps > 1 && index < range.scaleSteps) {
         Array.from({
           length: range.scaleSubSteps - 1
-        }).forEach(function (subStepEl, subIndex) {
-          var subStep = scaleStepValue / range.scaleSubSteps;
-          var scaleSubValue = scaleValue + subStep * (subIndex + 1);
-          var subProgress = (scaleSubValue - range.min) / (range.max - range.min);
-          html += "<div class=\"range-scale-step range-scale-substep\" style=\"" + positionProperty + ": " + subProgress * 100 + "%\"></div>";
+        }).forEach((subStepEl, subIndex) => {
+          const subStep = scaleStepValue / range.scaleSubSteps;
+          const scaleSubValue = scaleValue + subStep * (subIndex + 1);
+          const subProgress = (scaleSubValue - range.min) / (range.max - range.min);
+          html += `<div class="range-scale-step range-scale-substep" style="${positionProperty}: ${subProgress * 100}%"></div>`;
         });
       }
     });
     return html;
-  };
+  }
 
-  _proto.updateScale = function updateScale() {
-    var range = this;
+  updateScale() {
+    const range = this;
 
     if (!range.scale || range.scaleSteps < 1) {
       if (range.$scaleEl) range.$scaleEl.remove();
@@ -637,27 +637,26 @@ var Range = /*#__PURE__*/function (_Framework7Class) {
     }
 
     range.$scaleEl.html(range.renderScale());
-  };
+  }
 
-  _proto.init = function init() {
-    var range = this;
+  init() {
+    const range = this;
     range.calcSize();
     range.layout();
     range.attachEvents();
     return range;
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var range = this;
+  destroy() {
+    let range = this;
     range.$el.trigger('range:beforedestroy');
     range.emit('local::beforeDestroy rangeBeforeDestroy', range);
     delete range.$el[0].f7Range;
     range.detachEvents();
     deleteProps(range);
     range = null;
-  };
+  }
 
-  return Range;
-}(Framework7Class);
+}
 
 export default Range;

package/components/range/range-rtl.css

@@ -1 +1 @@
-:root{--f7-range-scale-step-height:5px;--f7-range-scale-text-color:#666;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-bg-color:#b7b8b7;--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-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-bg-color:#b9b9b9;--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-text-color:#fff;--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}.aurora{--f7-range-size:20px;--f7-range-bar-bg-color:#c7c7c7;--f7-range-bar-size:2px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:16px;--f7-range-knob-box-shadow:none;--f7-range-label-size:20px;--f7-range-label-text-color:#fff;--f7-range-label-font-size:10px;--f7-range-label-font-weight:600;--f7-range-label-border-radius:4px;--f7-range-label-padding:0px 4px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:11px;--f7-range-scale-font-weight:500;--f7-range-scale-label-offset:2px}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;-moz-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)}.aurora .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.aurora .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-text-color:#666;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-bg-color:#b7b8b7;--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-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-bg-color:#b9b9b9;--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-text-color:#fff;--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}.aurora{--f7-range-size:20px;--f7-range-bar-bg-color:#c7c7c7;--f7-range-bar-size:2px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:16px;--f7-range-knob-box-shadow:none;--f7-range-label-size:20px;--f7-range-label-text-color:#fff;--f7-range-label-font-size:10px;--f7-range-label-font-weight:600;--f7-range-label-border-radius:4px;--f7-range-label-padding:0px 4px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:11px;--f7-range-scale-font-weight:500;--f7-range-scale-label-offset:2px}.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)}.aurora .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.aurora .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}