@megafon/ui-core 5.8.0 → 5.9.0

package/dist/es/components/Sliders/SliderRange/SliderRange.css

@@ -0,0 +1,154 @@
+.mfui-slider-range {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.mfui-slider-range__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.mfui-slider-range__display-values {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+.mfui-slider-range__range-container {
+  position: relative;
+  height: 12px;
+  margin: 6px 0;
+}
+.mfui-slider-range__range-input {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+}
+.mfui-slider-range__range-input_left {
+  z-index: 1;
+}
+.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over {
+  z-index: 3;
+}
+.mfui-slider-range__range-input_right {
+  z-index: 2;
+}
+.mfui-slider-range__range-input:focus {
+  outline: none;
+}
+.mfui-slider-range__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 0;
+  height: 100%;
+  padding: 0 12px;
+  border-radius: 100px;
+  background-color: var(--spbSky0);
+}
+.mfui-slider-range__range-track-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-slider-range__range-track-segment {
+  position: absolute;
+  height: 100%;
+  border-radius: 100px;
+  background-color: var(--brandGreen);
+}
+.mfui-slider-range_disabled .mfui-slider-range__head {
+  color: var(--spbSky3);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky1)), to(var(--spbSky1)));
+  background-image: linear-gradient(var(--spbSky1), var(--spbSky1));
+  cursor: default;
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-track-segment {
+  background-color: var(--spbSky1);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+}

package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
+import { ScaleType } from '../components/SliderScale/SliderScale';
+import './SliderRange.less';
+export interface ISliderRange {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Текущее значение ползунка слева */
+    leftValue?: number;
+    /** Текущее значение ползунка справа */
+    rightValue?: number;
+    /** Минимальное значение */
+    minValue: number;
+    /** Максимальное значение */
+    maxValue: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: DisplayValueType;
+    /** Префикс для выводимого значения слева */
+    displayLeftValuePrefix?: string;
+    /** Префикс для выводимого значения справа */
+    displayRightValuePrefix?: string;
+    /** Единица измерения выводимого значения */
+    displayValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Шаг */
+    step?: number;
+    /** Тип встроенной шкалы */
+    scale?: ScaleType;
+    /** Кастомная шкала */
+    customScale?: string[];
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        leftInput?: Record<string, string>;
+        rightInput?: Record<string, string>;
+        leftRangeInput?: Record<string, string>;
+        rightRangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (leftValue: number, rightValue: number) => void;
+}
+declare const SliderRange: React.FC<ISliderRange>;
+export default SliderRange;

package/dist/es/components/Sliders/SliderRange/SliderRange.js

@@ -0,0 +1,227 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
+import SliderScale, { Scale } from "../components/SliderScale/SliderScale";
+import { getRangeValue } from "../helpers";
+import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
+import "./SliderRange.css";
+var THUMB_SIZE = 24;
+var cn = cnCreate('mfui-slider-range');
+
+var SliderRange = function SliderRange(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      displayValueType = _ref.displayValueType,
+      displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+      displayRightValuePrefix = _ref.displayRightValuePrefix,
+      displayValueUnit = _ref.displayValueUnit,
+      _ref$leftValue = _ref.leftValue,
+      outerLeftValue = _ref$leftValue === void 0 ? 0 : _ref$leftValue,
+      _ref$rightValue = _ref.rightValue,
+      outerRightValue = _ref$rightValue === void 0 ? 0 : _ref$rightValue,
+      minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      scale = _ref.scale,
+      customScale = _ref.customScale,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
+  var defaultLeftRangeValue = outerLeftValue || minValue;
+  var defaultRightRangeValue = outerRightValue || maxValue;
+  var rangeTrackInnerRef = React.useRef(null);
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rawLeftInputValue = _React$useState2[0],
+      setRawLeftInputValue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rawRightInputValue = _React$useState4[0],
+      setRawRightInputValue = _React$useState4[1];
+
+  var _React$useState5 = React.useState(defaultLeftRangeValue),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      innerLeftRangeValue = _React$useState6[0],
+      setInnerLeftRangeValue = _React$useState6[1];
+
+  var _React$useState7 = React.useState(defaultRightRangeValue),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      innerRightRangeValue = _React$useState8[0],
+      setInnerRightRangeValue = _React$useState8[1];
+
+  var leftRangeValue = isControlled ? outerLeftValue : innerLeftRangeValue;
+  var rightRangeValue = isControlled ? outerRightValue : innerRightRangeValue;
+  var trackSize = getTrackSize(leftRangeValue, rightRangeValue, minValue, maxValue);
+  var isThumbAtEndOfTrack = checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, THUMB_SIZE);
+  var showHead = !!label || !!displayValueType;
+
+  var handleRangeTrackClick = function handleRangeTrackClick(e) {
+    if (!rangeTrackInnerRef.current) {
+      return;
+    }
+
+    var clickValue = getRangeValueByPageX(e.pageX, minValue, maxValue, rangeTrackInnerRef.current);
+    var newRangeValue = getRangeValue(clickValue, minValue, maxValue, step);
+    var leftHalfTrack = leftRangeValue + (rightRangeValue - leftRangeValue) / 2;
+
+    if (newRangeValue < leftHalfTrack) {
+      !isControlled && setInnerLeftRangeValue(newRangeValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
+    } else {
+      !isControlled && setInnerRightRangeValue(newRangeValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
+    }
+  };
+
+  var handleLeftInputChange = function handleLeftInputChange(isRange) {
+    return function (e) {
+      var targetValue = e.target.value;
+      var newRangeValue = getRangeValue(targetValue, minValue, rightRangeValue, step);
+      !isControlled && setInnerLeftRangeValue(newRangeValue);
+      !isRange && setRawLeftInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
+    };
+  };
+
+  var handleRightInputChange = function handleRightInputChange(isRange) {
+    return function (e) {
+      var targetValue = e.target.value;
+      var newRangeValue = getRangeValue(targetValue, leftRangeValue, maxValue, step);
+      !isControlled && setInnerRightRangeValue(newRangeValue);
+      !isRange && setRawRightInputValue(targetValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
+    };
+  };
+
+  var handleInputBlur = function handleInputBlur(isLeft) {
+    return function () {
+      if (isLeft) {
+        setRawLeftInputValue(null);
+      } else {
+        setRawRightInputValue(null);
+      }
+    };
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    style: {
+      '--thumbSize': "".concat(THUMB_SIZE, "px")
+    }
+  }), showHead && /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
+    className: cn('display-values')
+  }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
+    displayValueType: displayValueType,
+    displayValuePrefix: displayLeftValuePrefix,
+    displayValueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleLeftInputChange(false),
+    onBlur: handleInputBlur(true),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
+    }
+  }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
+    displayValueType: displayValueType,
+    displayValuePrefix: displayRightValuePrefix,
+    displayValueUnit: displayValueUnit,
+    disabled: disabled,
+    onChange: handleRightInputChange(false),
+    onBlur: handleInputBlur(false),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightInput
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-container')
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('range-input', {
+      left: true,
+      over: isThumbAtEndOfTrack
+    }),
+    type: "range",
+    value: leftRangeValue,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onChange: handleLeftInputChange(true),
+    disabled: disabled
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput))), /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('range-input', {
+      right: true
+    }),
+    type: "range",
+    value: rightRangeValue,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onChange: handleRightInputChange(true),
+    disabled: disabled
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track'),
+    onClick: handleRangeTrackClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track-inner'),
+    ref: rangeTrackInnerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track-segment'),
+    style: {
+      left: "".concat(trackSize.left, "%"),
+      right: "".concat(trackSize.right, "%")
+    }
+  })))), (!!scale || !!customScale) && /*#__PURE__*/React.createElement(SliderScale, {
+    minValue: minValue,
+    maxValue: maxValue,
+    scale: scale,
+    customScale: customScale,
+    disabled: disabled,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale
+    }
+  }));
+};
+
+SliderRange.propTypes = {
+  className: PropTypes.string,
+  leftValue: PropTypes.number,
+  rightValue: PropTypes.number,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayLeftValuePrefix: PropTypes.string,
+  displayRightValuePrefix: PropTypes.string,
+  displayValueUnit: PropTypes.string,
+  isControlled: PropTypes.bool,
+  step: PropTypes.number,
+  scale: PropTypes.oneOf(Object.values(Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    leftInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rightInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    leftRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rightRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    scale: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default SliderRange;

package/dist/es/components/Sliders/SliderRange/helpers.d.ts

@@ -0,0 +1,6 @@
+export declare const getTrackSize: (vleftValue: number | undefined, rightValue: number | undefined, minValue: number, maxValue: number) => {
+    left: number;
+    right: number;
+};
+export declare const getRangeValueByPageX: (pageX: number, minValue: number, maxValue: number, trackInnerNode: HTMLDivElement) => number;
+export declare const checkForThumbAtEndOfTrack: (leftRangeValue: number, minValue: number, maxValue: number, thumbSize: number) => boolean;

package/dist/es/components/Sliders/SliderRange/helpers.js

@@ -0,0 +1,31 @@
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.number.to-fixed.js";
+export var getTrackSize = function getTrackSize() {
+  var vleftValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var rightValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var minValue = arguments.length > 2 ? arguments[2] : undefined;
+  var maxValue = arguments.length > 3 ? arguments[3] : undefined;
+  var valueDifference = maxValue - minValue;
+
+  if (valueDifference <= 0) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+
+  var leftPercent = (vleftValue - minValue) * 100 / valueDifference;
+  var rightPercent = (maxValue - rightValue) * 100 / valueDifference;
+  return {
+    left: Number(leftPercent.toFixed(3)),
+    right: Number(rightPercent.toFixed(3))
+  };
+};
+export var getRangeValueByPageX = function getRangeValueByPageX(pageX, minValue, maxValue, trackInnerNode) {
+  var clickPosition = pageX - trackInnerNode.getBoundingClientRect().left;
+  var clickPositionPercent = clickPosition * 100 / trackInnerNode.offsetWidth;
+  return (maxValue - minValue) * clickPositionPercent / 100 + minValue;
+};
+export var checkForThumbAtEndOfTrack = function checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, thumbSize) {
+  return leftRangeValue > maxValue - thumbSize * (maxValue - minValue) / 100;
+};

package/dist/es/components/Sliders/SliderRatio/SliderRatio.css

@@ -0,0 +1,209 @@
+.mfui-slider-ratio {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.mfui-slider-ratio__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.mfui-slider-ratio__display-values {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+.mfui-slider-ratio__range-container {
+  position: relative;
+  width: 100%;
+}
+.mfui-slider-ratio__range-input {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 100px;
+  background: var(--brandPurple);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--brandGreen)), to(var(--brandGreen)));
+  background-image: linear-gradient(var(--brandGreen), var(--brandGreen));
+  background-repeat: no-repeat;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+}
+.mfui-slider-ratio__range-input:focus {
+  outline: none;
+}
+.mfui-slider-ratio__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-webkit-slider-runnable-track {
+  border: none;
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-input::-moz-range-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-input::-ms-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-track {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.mfui-slider-ratio__scale {
+  position: absolute;
+  top: 0;
+  right: calc(var(--thumbSize) / 2);
+  bottom: 0;
+  left: calc(var(--thumbSize) / 2);
+  z-index: 2;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  pointer-events: none;
+}
+.mfui-slider-ratio__scale-item {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+}
+.mfui-slider-ratio__scale-item:first-child {
+  margin-left: -2px;
+}
+.mfui-slider-ratio__scale-item:last-child {
+  margin-right: -2px;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__head {
+  color: var(--spbSky3);
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input {
+  background-color: var(--spbSky1);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky0)), to(var(--spbSky0)));
+  background-image: linear-gradient(var(--spbSky0), var(--spbSky0));
+  cursor: default;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track {
+  cursor: default;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__scale {
+  display: none;
+}