@megafon/ui-core 5.12.1 → 5.14.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.14.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.13.0...@megafon/ui-core@5.14.0) (2024-06-03)
+
+
+### Bug Fixes
+
+* **carousel:** fix page scroll ([99c80bc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/99c80bccd1f09b3ad3feaa965d9c0205b038d660))
+
+
+### Features
+
+* **search:** modern gradient ([7c2becc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/7c2beccd79d83e9cd099ea49de4138e4ab9822af))
+
+
+
+
+
+# [5.13.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.12.1...@megafon/ui-core@5.13.0) (2024-05-27)
+
+
+### Bug Fixes
+
+* **sliders:** fix bugs ([f09615a](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/f09615a4a417836ceaa71b3c604a9288f81ba69a))
+
+
+### Features
+
+* **row:** create component Row ([08da88f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/08da88fcbbdaea5c5fb1a88cffbfb820025e6d84))
+* **snackbar:** update snackbar component ([71713f1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/71713f11e81bb4da0e4b531fd27e2882287b6122))
+
+
+
+
+
 ## [5.12.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.12.0...@megafon/ui-core@5.12.1) (2024-05-14)
 
 

package/dist/es/components/Carousel/Carousel.js

@@ -302,6 +302,7 @@ var Carousel = function Carousel(_ref) {
     fadeEffect: effectTheme === EffectTheme.FADE ? {
       crossFade: effectTheme === EffectTheme.FADE
     } : undefined,
+    touchMoveStopPropagation: true,
     noSwipingSelector: noSwipingSelector ? ".swiper-pagination, ".concat(noSwipingSelector) : '.swiper-pagination',
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginnig,

package/dist/es/components/Row/Row.css

@@ -0,0 +1,238 @@
+.mfui-row {
+  position: relative;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 12px;
+  color: var(--content);
+  text-decoration: none;
+  background-color: var(--base);
+  -webkit-transition: background-color, color, -webkit-box-shadow;
+  transition: background-color, color, -webkit-box-shadow;
+  transition: background-color, color, box-shadow;
+  transition: background-color, color, box-shadow, -webkit-box-shadow;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row {
+    padding: 20px 24px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row {
+    padding: 24px 32px;
+  }
+}
+.mfui-row__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-row__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-row__icon-container {
+    margin-left: -4px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__icon-container {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__icon-container {
+    width: 56px;
+    height: 56px;
+    margin-right: 16px;
+  }
+}
+.mfui-row__icon-container svg {
+  fill: var(--content);
+}
+.mfui-row__icon-container_colored {
+  border-radius: 50%;
+  background-color: var(--brandGreen20);
+}
+.mfui-row__icon-container_colored svg {
+  fill: var(--brandGreen);
+}
+.mfui-row__icon,
+.mfui-row__icon svg {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__icon,
+  .mfui-row__icon svg {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+  }
+}
+.mfui-row__header {
+  margin-right: auto;
+  padding-right: 12px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-row__title {
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 500;
+  }
+}
+.mfui-row__sub-title {
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 2px;
+  color: var(--spbSky3);
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__sub-title:not(.mfui-row_size_small) {
+    font-size: 15px;
+    line-height: 24px;
+    margin-top: 4px;
+  }
+}
+.mfui-row__arrow {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  fill: var(--spbSky3);
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__arrow {
+    margin-left: 4px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row__arrow {
+    margin-left: 12px;
+  }
+}
+.mfui-row__children {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row__children {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+  }
+}
+@media screen and (min-width: 768px) and screen and (min-width: 1280px) {
+  .mfui-row__children {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-row_view_shadow {
+  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.mfui-row_view_stroke {
+  border: 1px solid var(--spbSky2);
+  background-color: inherit;
+}
+.mfui-row_pointer {
+  cursor: pointer;
+}
+.mfui-row_pointer.mfui-row_view_shadow:hover {
+  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
+}
+.mfui-row_pointer.mfui-row_view_shadow:hover:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 12px;
+  background-color: var(--stcWhite10);
+  pointer-events: none;
+}
+.mfui-row_pointer.mfui-row_view_stroke:hover {
+  background-color: var(--spbSky0);
+}
+.mfui-row_has-arrow {
+  padding-right: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-row_has-arrow {
+    padding-right: 16px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_has-arrow {
+    padding-right: 20px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_has-arrow.mfui-row_size_small {
+    padding-right: 16px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-row_size_small {
+    padding: 16px 24px 16px 20px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_size_small {
+    padding: 20px 24px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-row_size_small .mfui-row__sub-title {
+    font-size: 15px;
+    line-height: 24px;
+    margin-top: 4px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-row_size_small .mfui-row__icon-container {
+    width: 40px;
+    height: 40px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-row_size_small .mfui-row__arrow {
+    margin-right: -4px;
+  }
+}
+.mfui-row_size_small .mfui-row__children {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}

package/dist/es/components/Row/Row.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import './Row.less';
+export interface IRowProps {
+    /** Заголовок */
+    title: string;
+    /** Дополнительный текст */
+    subTitle?: string;
+    /** Размер компонента */
+    size?: 'big' | 'small';
+    /** Визуальный эффект фона */
+    backgroundView?: 'shadow' | 'stroke';
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Фоновая заливка у иконки */
+    isIconColored?: boolean;
+    /** Показать стелку */
+    showArrow?: boolean;
+    /** Показать загрузку */
+    showLoader?: boolean;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут для открытия ссылки */
+    target?: '_self' | '_blank';
+    /** rel - аргумент тега <a> */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Дочерние элементы: Badges, Switcher, Selector */
+    children?: React.ReactNode | string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrow?: Record<string, string>;
+        preloader?: Record<string, string>;
+    };
+}
+declare const Row: React.FC<IRowProps>;
+export default Row;

package/dist/es/components/Row/Row.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import Header from "../Header/Header";
+import Preloader from "../Preloader/Preloader";
+import "./Row.css";
+
+var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+
+var cn = cnCreate('mfui-row');
+
+var Row = function Row(_ref) {
+  var title = _ref.title,
+      subTitle = _ref.subTitle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      _ref$backgroundView = _ref.backgroundView,
+      backgroundView = _ref$backgroundView === void 0 ? 'shadow' : _ref$backgroundView,
+      icon = _ref.icon,
+      _ref$isIconColored = _ref.isIconColored,
+      isIconColored = _ref$isIconColored === void 0 ? false : _ref$isIconColored,
+      _ref$showArrow = _ref.showArrow,
+      showArrow = _ref$showArrow === void 0 ? false : _ref$showArrow,
+      _ref$showLoader = _ref.showLoader,
+      showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      href = _ref.href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  var ElementType = href ? 'a' : 'div';
+  var isActive = !showLoader && (!!href || !!onClick);
+  var isSmallSize = size === 'small';
+
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      size: size,
+      view: backgroundView,
+      pointer: isActive,
+      'has-arrow': showArrow && !showLoader
+    }, [className, classes.root]),
+    href: href,
+    target: href ? target : undefined,
+    rel: rel,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, !!icon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container', {
+      colored: isIconColored
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon')
+  }, icon)), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes.title]),
+    as: isSmallSize ? 'h5' : 'h3'
+  }, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('sub-title', [classes.subtitle])
+  }, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('children')
+  }, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, _extends({
+    className: cn('arrow')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)))) : /*#__PURE__*/React.createElement(Preloader, {
+    delay: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.preloader
+    }
+  })));
+};
+
+Row.propTypes = {
+  title: PropTypes.string.isRequired,
+  subTitle: PropTypes.string,
+  size: PropTypes.oneOf(['big', 'small']),
+  backgroundView: PropTypes.oneOf(['shadow', 'stroke']),
+  icon: PropTypes.element,
+  isIconColored: PropTypes.bool,
+  showArrow: PropTypes.bool,
+  showLoader: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank']),
+  rel: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default Row;

package/dist/es/components/Search/Search.css

@@ -265,13 +265,19 @@
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
+  background: var(--base);
+  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--base) 100%);
+  mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
 }
 .mfui-search__list-item_active .mfui-search__item-title:after,
 .mfui-search__popular-item_active .mfui-search__popular-item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
+  background: var(--spbSky0);
+  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  -webkit-mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
+  mask-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--spbSky0) 100%);
 }
 .mfui-search__highlighted-fragment {
   font-weight: bold;

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

@@ -11,12 +11,8 @@
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
+  display: grid;
+  grid-template-columns: auto 55%;
   margin-bottom: 8px;
 }
 .mfui-slider__display-value {

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

@@ -6,7 +6,7 @@ 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, getTrackSize } from "../helpers";
+import { getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
 import "./Slider.css";
 var cn = cnCreate('mfui-slider');
 
@@ -47,7 +47,7 @@ var Slider = function Slider(_ref) {
 
   var handleInputChange = function handleInputChange(isRange) {
     return function (e) {
-      var targetValue = e.target.value;
+      var targetValue = removeFirstZeros(e.target.value);
       var newRangeValue = getRangeValue(targetValue, minValue, maxValue, step);
       !isControlled && setInnerRangeValue(newRangeValue);
       !isRange && setRawInputValue(targetValue);

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

@@ -14,15 +14,20 @@
   margin-bottom: 8px;
 }
 .mfui-slider-range__display-values {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
+  grid-template-columns: 45% 45%;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 100%;
   margin-top: 8px;
 }
+.mfui-slider-range__display-value_left {
+  margin-right: auto;
+}
+.mfui-slider-range__display-value_right {
+  margin-left: auto;
+}
 .mfui-slider-range__range-container {
   position: relative;
   height: 12px;
@@ -97,6 +102,7 @@
   padding: 0 12px;
   border-radius: 100px;
   background-color: var(--spbSky0);
+  cursor: pointer;
 }
 .mfui-slider-range__range-track-inner {
   position: relative;
@@ -112,6 +118,9 @@
 .mfui-slider-range_disabled .mfui-slider-range__head {
   color: var(--spbSky3);
 }
+.mfui-slider-range_disabled .mfui-slider-range__range-track {
+  cursor: default;
+}
 .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));

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

@@ -6,7 +6,7 @@ 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 { getRangeValue, removeFirstZeros } from "../helpers";
 import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
 import "./SliderRange.css";
 var THUMB_SIZE = 24;
@@ -35,6 +35,9 @@ var SliderRange = function SliderRange(_ref) {
       onChange = _ref.onChange;
   var outerLeftRangeValue = getRangeValue(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
   var outerRightRangeValue = getRangeValue(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
+  var leftRangeInputRef = React.useRef(null);
+  var rightRangeInputRef = React.useRef(null);
+  var rangeTrackRef = React.useRef(null);
   var rangeTrackInnerRef = React.useRef(null);
 
   var _React$useState = React.useState(null),
@@ -63,8 +66,8 @@ var SliderRange = function SliderRange(_ref) {
   var isThumbAtEndOfTrack = checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, THUMB_SIZE);
   var showHead = !!label || !!displayValueType;
 
-  var handleRangeTrackClick = function handleRangeTrackClick(e) {
-    if (!rangeTrackInnerRef.current) {
+  var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
+    if (!rangeTrackInnerRef.current || disabled) {
       return;
     }
 
@@ -81,9 +84,27 @@ var SliderRange = function SliderRange(_ref) {
     }
   };
 
+  var handleRangeTrackPointerLeave = React.useCallback(function () {
+    var _a, _b, _c;
+
+    (_a = leftRangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = rightRangeInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    (_c = rangeTrackRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
+  }, []);
+
+  var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
+    var _a;
+
+    if (disabled) {
+      return;
+    }
+
+    (_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
+  };
+
   var handleLeftInputChange = function handleLeftInputChange(isRange) {
     return function (e) {
-      var targetValue = e.target.value;
+      var targetValue = removeFirstZeros(e.target.value);
       var newRangeValue = getRangeValue(targetValue, minValue, rightRangeValue, step);
       !isControlled && setInnerLeftRangeValue(newRangeValue);
       !isRange && setRawLeftInputValue(targetValue);
@@ -93,7 +114,7 @@ var SliderRange = function SliderRange(_ref) {
 
   var handleRightInputChange = function handleRightInputChange(isRange) {
     return function (e) {
-      var targetValue = e.target.value;
+      var targetValue = removeFirstZeros(e.target.value);
       var newRangeValue = getRangeValue(targetValue, leftRangeValue, maxValue, step);
       !isControlled && setInnerRightRangeValue(newRangeValue);
       !isRange && setRawRightInputValue(targetValue);
@@ -126,6 +147,9 @@ var SliderRange = function SliderRange(_ref) {
   }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
     className: cn('display-values')
   }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    className: cn('display-value', {
+      left: true
+    }),
     value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
     displayValueType: displayValueType,
     displayValuePrefix: displayLeftValuePrefix,
@@ -137,6 +161,9 @@ var SliderRange = function SliderRange(_ref) {
       input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
     }
   }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    className: cn('display-value', {
+      right: true
+    }),
     value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
     displayValueType: displayValueType,
     displayValuePrefix: displayRightValuePrefix,
@@ -160,7 +187,9 @@ var SliderRange = function SliderRange(_ref) {
     max: maxValue,
     onChange: handleLeftInputChange(true),
     disabled: disabled
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput))), /*#__PURE__*/React.createElement("input", _extends({
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput), {
+    ref: leftRangeInputRef
+  })), /*#__PURE__*/React.createElement("input", _extends({
     className: cn('range-input', {
       right: true
     }),
@@ -170,9 +199,13 @@ var SliderRange = function SliderRange(_ref) {
     max: maxValue,
     onChange: handleRightInputChange(true),
     disabled: disabled
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput))), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput), {
+    ref: rightRangeInputRef
+  })), /*#__PURE__*/React.createElement("div", {
     className: cn('range-track'),
-    onClick: handleRangeTrackClick
+    onPointerUp: handleRangeTrackPointerUp,
+    onPointerDown: handleRangeTrackPointerDown,
+    ref: rangeTrackRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('range-track-inner'),
     ref: rangeTrackInnerRef

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

@@ -14,15 +14,20 @@
   margin-bottom: 8px;
 }
 .mfui-slider-ratio__display-values {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: grid;
+  grid-template-columns: 45% 45%;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 100%;
   margin-top: 8px;
 }
+.mfui-slider-ratio__display-value_left {
+  margin-right: auto;
+}
+.mfui-slider-ratio__display-value_right {
+  margin-left: auto;
+}
 .mfui-slider-ratio__range-container {
   position: relative;
   width: 100%;