framework7/components/range/range-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

: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 #0000004d;--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:#0003}.ios .dark,.ios.dark{--f7-range-bar-bg-color:#fff3}.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{align-self:center;cursor:pointer;display:block;position:relative;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{height:var(--f7-range-size);touch-action:pan-y;width:100%}.range-slider.range-slider-vertical{height:100%;touch-action:pan-x;width:var(--f7-range-size)}.range-bar{background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius);overflow:hidden;position:absolute}.range-slider-vertical .range-bar{height:100%;left:50%;margin-left:calc(var(--f7-range-bar-size)*-1/2);top:0;width:var(--f7-range-bar-size)}.range-slider-horizontal .range-bar{height:var(--f7-range-bar-size);left:0;margin-top:calc(var(--f7-range-bar-size)*-1/2);top:50%;width:100%}.range-bar-active{background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color));position:absolute}.range-slider-horizontal .range-bar-active{height:100%;right:0;top:0}.range-slider-vertical .range-bar-active{bottom:0;left:0;width:100%}.range-slider-vertical-reversed .range-bar-active{bottom:auto;top:0}.range-knob-wrap{height:var(--f7-range-knob-height);position:absolute;width:var(--f7-range-knob-width);z-index:20}.range-slider-horizontal .range-knob-wrap{margin-right:calc(var(--f7-range-knob-width)*-1/2);margin-top:calc(var(--f7-range-knob-height)*-1/2);right:0;top:50%}.range-slider-vertical .range-knob-wrap{bottom:0;height:var(--f7-range-knob-width);left:50%;margin-bottom:calc(var(--f7-range-knob-width)*-1/2);margin-left:calc(var(--f7-range-knob-height)*-1/2);width:var(--f7-range-knob-height)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;margin-bottom:0;margin-top:calc(var(--f7-range-knob-width)*-1/2);top:0}.range-knob{background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow);box-sizing:border-box;z-index:1}.range-knob-label{background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));border-radius:var(--f7-range-label-border-radius);bottom:100%;box-sizing:border-box;color:var(--f7-range-label-text-color);font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);height:var(--f7-range-label-size);left:50%;line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);padding:var(--f7-range-label-padding);position:absolute;text-align:center;transform:translateY(100%) scale(0);transition-duration:.12s;transition-property:transform}.range-knob-active-state .range-knob-label{transform:translateY(0) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{left:0;margin-top:calc(var(--f7-range-bar-size)/2);top:50%;width:100%}.range-slider-vertical .range-scale{height:100%;margin-right:calc(var(--f7-range-bar-size)/2);right:50%;top:0}.range-scale-step{box-sizing:border-box;color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);line-height:1;position:absolute}.range-scale-step:before{background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color));content:"";position:absolute}.range-slider-horizontal .range-scale-step{align-items:flex-start;height:var(--f7-range-scale-step-height);justify-content:center;margin-right:calc(var(--f7-range-scale-step-width)*-1/2);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;width:var(--f7-range-scale-step-width)}.range-slider-horizontal .range-scale-step:before{height:var(--f7-range-scale-step-height);left:0;top:0;width:100%}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(var(--f7-range-scale-step-width)*-1)}.range-slider-vertical .range-scale-step{align-items:center;height:var(--f7-range-scale-step-width);justify-content:flex-end;line-height:1;margin-bottom:calc(var(--f7-range-scale-step-width)*-1/2);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;width:var(--f7-range-scale-step-height)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(var(--f7-range-scale-step-width)*-1)}.range-slider-vertical .range-scale-step:before{height:100%;right:0;top:0;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);height:100%;left:0;position:absolute;top:0;transition-duration:.3s;width:100%}.ios .range-knob:after{height:44px;left:50%;top:50%;width:44px}.ios .range-knob:after,.ios .range-knob:before{content:"";position:absolute}.ios .range-knob:before{box-shadow:0 0 40px 15px rgba(var(--f7-theme-color-rgb),.75);height:1px;left:50%;margin-left:-.5px;margin-top:-.5px;opacity:0;top:50%;transition-duration:.3s;width:1px}.ios .range-knob:after{border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);height:100%;inset:0;margin:0;opacity:0;transition-duration:.3s;width:100%}.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:#0000;transform:scale(1.4)}.ios .range-knob-active-state .range-knob:after,.ios .range-knob-active-state .range-knob:before{opacity:1}.md .range-knob,.md .range-knob-wrap{align-items:center;display:flex;justify-content:center}.md .range-knob{border-radius:4px;height:var(--f7-range-knob-height);transition-duration:.2s;transition-property:transform,background-color;width:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{height:4px;width:var(--f7-range-knob-height)}.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{margin-bottom:8px}.md .range-knob-label,.md .range-knob-label:before{margin-left:calc(var(--f7-range-label-size)*-1/2);width:var(--f7-range-label-size)}.md .range-knob-label:before{background:var(--f7-range-label-bg-color,var(--f7-theme-color));border-radius:50% 50% 50% 0;content:"";height:var(--f7-range-label-size);left:50%;position:absolute;top:0;transform:rotate(-45deg);z-index:-1}.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{background:var(--f7-range-knob-color);border-radius:50%;content:"";height:4px;pointer-events:none;position:absolute;top:calc(50% - 2px);transition-duration:.2s;width:4px;z-index:1}.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{left:calc(50% - 2px);right:auto;top: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)}