framework7 7.0.8 → 8.0.0-beta.1

package/components/range/range-class.js

@@ -2,7 +2,6 @@ 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]);
@@ -26,8 +25,9 @@ class Range extends Framework7Class {
       scaleSubSteps: 0,
       formatScaleLabel: null,
       limitKnobPosition: app.theme === 'ios'
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     range.useModulesParams(defaults);
     range.params = extend(defaults, params);
     const el = range.params.el;
@@ -46,17 +46,13 @@ class Range extends Framework7Class {
         range.params[paramName] = dataset[paramName];
       }
     });
-
     if (!range.params.value) {
       if (typeof dataset.value !== 'undefined') range.params.value = dataset.value;
-
       if (typeof dataset.valueLeft !== 'undefined' && typeof dataset.valueRight !== 'undefined') {
         range.params.value = [parseFloat(dataset.valueLeft), parseFloat(dataset.valueRight)];
       }
     }
-
     let $inputEl;
-
     if (!range.params.dual) {
       if (range.params.inputEl) {
         $inputEl = $(range.params.inputEl);
@@ -64,7 +60,6 @@ class Range extends Framework7Class {
         $inputEl = $el.find('input[type="range"]').eq(0);
       }
     }
-
     const {
       dual,
       step,
@@ -99,7 +94,6 @@ class Range extends Framework7Class {
       scaleSubSteps,
       limitKnobPosition
     });
-
     if ($inputEl) {
       'step min max'.split(' ').forEach(paramName => {
         if (!params[paramName] && $inputEl.attr(paramName)) {
@@ -107,39 +101,37 @@ class Range extends Framework7Class {
           range[paramName] = parseFloat($inputEl.attr(paramName));
         }
       });
-
       if (typeof $inputEl.val() !== 'undefined') {
         range.params.value = parseFloat($inputEl.val());
         range.value = parseFloat($inputEl.val());
       }
-    } // Dual
-
+    }
 
+    // Dual
     if (range.dual) {
       $el.addClass('range-slider-dual');
     }
-
     if (range.label) {
       $el.addClass('range-slider-label');
-    } // Vertical
-
+    }
 
+    // Vertical
     if (range.vertical) {
       $el.addClass('range-slider-vertical');
-
       if (range.verticalReversed) {
         $el.addClass('range-slider-vertical-reversed');
       }
     } else {
       $el.addClass('range-slider-horizontal');
-    } // Check for layout
-
+    }
 
+    // Check for layout
     const $barEl = $('<div class="range-bar"></div>');
     const $barActiveEl = $('<div class="range-bar-active"></div>');
-    $barEl.append($barActiveEl); // Create Knobs
-    // prettier-ignore
+    $barEl.append($barActiveEl);
 
+    // Create Knobs
+    // prettier-ignore
     const knobHTML = `
       <div class="range-knob-wrap">
         <div class="range-knob"></div>
@@ -147,29 +139,25 @@ class Range extends Framework7Class {
       </div>
     `;
     const knobs = [$(knobHTML)];
-
     if (range.dual) {
       knobs.push($(knobHTML));
     }
-
     $el.append($barEl);
     knobs.forEach($knobEl => {
       $el.append($knobEl);
-    }); // Labels
+    });
 
+    // Labels
     const labels = [];
-
     if (range.label) {
       labels.push(knobs[0].find('.range-knob-label'));
-
       if (range.dual) {
         labels.push(knobs[1].find('.range-knob-label'));
       }
-    } // Scale
-
+    }
 
+    // Scale
     let $scaleEl;
-
     if (range.scale && range.scaleSteps >= 1) {
       $scaleEl = $(`
         <div class="range-scale">
@@ -178,7 +166,6 @@ class Range extends Framework7Class {
       `);
       $el.append($scaleEl);
     }
-
     extend(range, {
       knobs,
       labels,
@@ -186,8 +173,9 @@ class Range extends Framework7Class {
       $barActiveEl,
       $scaleEl
     });
-    $el[0].f7Range = range; // Touch Events
+    $el[0].f7Range = range;
 
+    // Touch Events
     let isTouched;
     const touchesStart = {};
     let isScrolling;
@@ -198,35 +186,28 @@ class Range extends Framework7Class {
     let dualValueIndex;
     let valueChangedByTouch;
     let targetTouchIdentifier;
-
     function onTouchChange() {
       valueChangedByTouch = true;
     }
-
     function handleTouchStart(e) {
       if (isTouched) return;
-
       if (!range.params.draggableBar) {
         if ($(e.target).closest('.range-knob').length === 0) {
           return;
         }
       }
-
       valueChangedByTouch = false;
       touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
       touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-
       if (e.type === 'touchstart') {
         targetTouchIdentifier = e.targetTouches[0].identifier;
       }
-
       isTouched = true;
       isScrolling = undefined;
       rangeOffset = $el.offset();
       rangeOffsetLeft = rangeOffset.left;
       rangeOffsetTop = rangeOffset.top;
       let progress;
-
       if (range.vertical) {
         progress = (touchesStart.y - rangeOffsetTop) / range.rangeHeight;
         if (!range.verticalReversed) progress = 1 - progress;
@@ -235,9 +216,7 @@ class Range extends Framework7Class {
       } else {
         progress = (touchesStart.x - rangeOffsetLeft) / range.rangeWidth;
       }
-
       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)) {
           dualValueIndex = 0;
@@ -252,19 +231,16 @@ class Range extends Framework7Class {
         $touchedKnobEl = range.knobs[0];
         newValue = progress * (range.max - range.min) + range.min;
       }
-
       nextTick(() => {
         if (isTouched) $touchedKnobEl.addClass('range-knob-active-state');
       }, 70);
       range.on('change', onTouchChange);
       range.setValue(newValue, true);
     }
-
     function handleTouchMove(e) {
       if (!isTouched) return;
       let pageX;
       let pageY;
-
       if (e.type === 'touchmove') {
         for (let i = 0; i < e.targetTouches.length; i += 1) {
           if (e.targetTouches[i].identifier === targetTouchIdentifier) {
@@ -276,21 +252,16 @@ class Range extends Framework7Class {
         pageX = e.pageX;
         pageY = e.pageY;
       }
-
       if (typeof pageX === 'undefined' && typeof pageY === 'undefined') return;
-
       if (typeof isScrolling === 'undefined' && !range.vertical) {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
       }
-
       if (isScrolling) {
         isTouched = false;
         return;
       }
-
       e.preventDefault();
       let progress;
-
       if (range.vertical) {
         progress = (pageY - rangeOffsetTop) / range.rangeHeight;
         if (!range.verticalReversed) progress = 1 - progress;
@@ -299,62 +270,47 @@ class Range extends Framework7Class {
       } else {
         progress = (pageX - rangeOffsetLeft) / range.rangeWidth;
       }
-
       let newValue = progress * (range.max - range.min) + range.min;
-
       if (range.dual) {
         let leftValue;
         let rightValue;
-
         if (dualValueIndex === 0) {
           leftValue = newValue;
           rightValue = range.value[1];
-
           if (leftValue > rightValue) {
             rightValue = leftValue;
           }
         } else {
           leftValue = range.value[0];
           rightValue = newValue;
-
           if (rightValue < leftValue) {
             leftValue = rightValue;
           }
         }
-
         newValue = [leftValue, rightValue];
       }
-
       range.setValue(newValue, true);
     }
-
     function handleTouchEnd(e) {
       if (e.type === 'touchend') {
         let touchEnded;
-
         for (let i = 0; i < e.changedTouches.length; i += 1) {
           if (e.changedTouches[i].identifier === targetTouchIdentifier) touchEnded = true;
         }
-
         if (!touchEnded) return;
       }
-
       if (!isTouched) {
         if (isScrolling) $touchedKnobEl.removeClass('range-knob-active-state');
         isTouched = false;
         return;
       }
-
       range.off('change', onTouchChange);
       isTouched = false;
       $touchedKnobEl.removeClass('range-knob-active-state');
-
       if (valueChangedByTouch && range.$inputEl && !range.dual) {
         range.$inputEl.trigger('change');
       }
-
       valueChangedByTouch = false;
-
       if (typeof range.previousValue !== 'undefined') {
         if (range.dual && (range.previousValue[0] !== range.value[0] || range.previousValue[1] !== range.value[1]) || !range.dual && range.previousValue !== range.value) {
           range.$el.trigger('range:changed', range.value);
@@ -362,16 +318,13 @@ class Range extends Framework7Class {
         }
       }
     }
-
     function handleResize() {
       range.calcSize();
       range.layout();
     }
-
     let parentModals;
     let parentPanel;
     let parentPage;
-
     range.attachEvents = function attachEvents() {
       const passive = support.passiveListener ? {
         passive: true
@@ -388,7 +341,6 @@ class Range extends Framework7Class {
       parentPage = range.$el.parents('.page').eq(0);
       parentPage.on('page:reinit', handleResize);
     };
-
     range.detachEvents = function detachEvents() {
       const passive = support.passiveListener ? {
         passive: true
@@ -398,34 +350,29 @@ class Range extends Framework7Class {
       app.off('touchend:passive', handleTouchEnd);
       app.off('tabShow', handleResize);
       app.off('resize', handleResize);
-
       if (parentModals) {
         parentModals.off('modal:open', handleResize);
       }
-
       if (parentPanel) {
         parentPanel.off('panel:open panel:resize', handleResize);
       }
-
       if (parentPage) {
         parentPage.off('page:reinit', handleResize);
       }
-
       parentModals = null;
       parentPanel = null;
       parentPage = null;
-    }; // Install Modules
-
+    };
 
-    range.useModules(); // Init
+    // Install Modules
+    range.useModules();
 
+    // Init
     range.init();
     return range;
   }
-
   calcSize() {
     const range = this;
-
     if (range.vertical) {
       const height = range.$el.outerHeight();
       if (height === 0) return;
@@ -438,7 +385,6 @@ class Range extends Framework7Class {
       range.knobWidth = range.knobs[0].outerWidth();
     }
   }
-
   layout() {
     const range = this;
     const {
@@ -459,10 +405,9 @@ class Range extends Framework7Class {
       limitKnobPosition
     } = range;
     const knobSize = vertical ? knobHeight : knobWidth;
-    const rangeSize = vertical ? rangeHeight : rangeWidth; // eslint-disable-next-line
-
+    const rangeSize = vertical ? rangeHeight : rangeWidth;
+    // eslint-disable-next-line
     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)];
       $barActiveEl.css({
@@ -471,13 +416,11 @@ class Range extends Framework7Class {
       });
       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;
         }
-
         $knobEl.css(positionProperty, `${startPos}px`);
         if (label) labels[knobIndex].text(range.formatLabel(value[knobIndex], labels[knobIndex][0]));
       });
@@ -485,30 +428,25 @@ class Range extends Framework7Class {
       const progress = (value - min) / (max - min);
       $barActiveEl.css(vertical ? 'height' : 'width', `${progress * 100}%`);
       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;
       }
-
       knobs[0].css(positionProperty, `${startPos}px`);
       if (label) labels[0].text(range.formatLabel(value, labels[0][0]));
     }
-
     if (range.dual && value.indexOf(min) >= 0 || !range.dual && value === min) {
       range.$el.addClass('range-slider-min');
     } else {
       range.$el.removeClass('range-slider-min');
     }
-
     if (range.dual && value.indexOf(max) >= 0 || !range.dual && value === max) {
       range.$el.addClass('range-slider-max');
     } else {
       range.$el.removeClass('range-slider-max');
     }
   }
-
   setValue(newValue, byTouchMove) {
     const range = this;
     const {
@@ -518,22 +456,17 @@ class Range extends Framework7Class {
     } = range;
     let valueChanged;
     let oldValue;
-
     if (range.dual) {
       oldValue = [range.value[0], range.value[1]];
       let newValues = newValue;
       if (!Array.isArray(newValues)) newValues = [newValue, newValue];
-
       if (newValue[0] > newValue[1]) {
         newValues = [newValues[0], newValues[0]];
       }
-
       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((value, valueIndex) => {
         range.value[valueIndex] = value;
       });
@@ -546,58 +479,49 @@ class Range extends Framework7Class {
       range.layout();
       valueChanged = oldValue !== value;
     }
-
     if (valueChanged) {
       range.previousValue = oldValue;
-    } // Events
-
-
+    }
+    // Events
     if (!valueChanged) return range;
     range.$el.trigger('range:change', range.value);
-
     if (range.$inputEl && !range.dual) {
       range.$inputEl.val(range.value);
-
       if (!byTouchMove) {
         range.$inputEl.trigger('input change');
       } else {
         range.$inputEl.trigger('input');
       }
     }
-
     if (!byTouchMove) {
       range.$el.trigger('range:changed', range.value);
       range.emit('local::changed rangeChanged', range, range.value);
     }
-
     range.emit('local::change rangeChange', range, range.value);
     return range;
   }
-
   getValue() {
     return this.value;
   }
-
   formatLabel(value, labelEl) {
     const range = this;
     if (range.params.formatLabel) return range.params.formatLabel.call(range, value, labelEl);
     return value;
   }
-
   formatScaleLabel(value) {
     const range = this;
     if (range.params.formatScaleLabel) return range.params.formatScaleLabel.call(range, value);
     return value;
   }
-
   renderScale() {
     const range = this;
     const {
       app,
       verticalReversed,
       vertical
-    } = range; // eslint-disable-next-line
+    } = range;
 
+    // eslint-disable-next-line
     const positionProperty = vertical ? verticalReversed ? 'top' : 'bottom' : app.rtl ? 'right' : 'left';
     let html = '';
     Array.from({
@@ -607,7 +531,6 @@ class Range extends Framework7Class {
       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
@@ -621,24 +544,19 @@ class Range extends Framework7Class {
     });
     return html;
   }
-
   updateScale() {
     const range = this;
-
     if (!range.scale || range.scaleSteps < 1) {
       if (range.$scaleEl) range.$scaleEl.remove();
       delete range.$scaleEl;
       return;
     }
-
     if (!range.$scaleEl) {
       range.$scaleEl = $('<div class="range-scale"></div>');
       range.$el.append(range.$scaleEl);
     }
-
     range.$scaleEl.html(range.renderScale());
   }
-
   init() {
     const range = this;
     range.calcSize();
@@ -646,7 +564,6 @@ class Range extends Framework7Class {
     range.attachEvents();
     return range;
   }
-
   destroy() {
     let range = this;
     range.$el.trigger('range:beforedestroy');
@@ -656,7 +573,5 @@ class Range extends Framework7Class {
     deleteProps(range);
     range = null;
   }
-
 }
-
 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;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-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)}

package/components/range/range-vars.less

@@ -5,13 +5,17 @@
   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
   */
   --f7-range-scale-step-height: 5px;
-  --f7-range-scale-text-color: #666;
   --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-bg-color: #b7b8b7;
   --f7-range-bar-size: 4px;
   --f7-range-bar-border-radius: 2px;
   --f7-range-knob-size: 28px;
@@ -26,6 +30,7 @@
   --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;
@@ -33,20 +38,12 @@
 });
 .md-vars({
   --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-color: var(--f7-theme-color);
-  */
   --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-bg-color: var(--f7-theme-color);
-  */
   --f7-range-label-font-size: 10px;
   --f7-range-label-border-radius: 50%;
   --f7-range-label-padding: 0px;
@@ -56,28 +53,9 @@
   --f7-range-scale-font-weight: 400;
   --f7-range-scale-label-offset: 4px;
 });
-.aurora-vars({
-  --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;
-  /*
+.md-color-vars({
   --f7-range-knob-color: var(--f7-theme-color);
-  */
-  --f7-range-knob-box-shadow: none;
-  --f7-range-label-size: 20px;
-  --f7-range-label-text-color: #fff;
-  /*
+  --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);
-  */
-  --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;
+  --f7-range-scale-text-color: var(--f7-md-on-surface-variant);
 });