@alfalab/core-components 41.1.0-beta.0 → 41.1.0

package/skeleton/modern/index.css

@@ -26,7 +26,7 @@
     --skeleton-gradient-animation-display: block;
     --skeleton-bg-animation-display: none;
     --skeleton-bg-animation-color: transparent;
-} .skeleton__component_b4xf7 {
+} .skeleton__component_xcuwx {
     position: relative;
     display: var(--skeleton-display);
     vertical-align: middle;
@@ -39,9 +39,9 @@
 
     /* Safari overflow fix https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b */
     -webkit-mask-image: -webkit-radial-gradient(white, black);
-} .skeleton__component_b4xf7 > * {
+} .skeleton__component_xcuwx > * {
     visibility: hidden;
-} .skeleton__component_b4xf7:before {
+} .skeleton__component_xcuwx:before {
     content: '';
     position: absolute;
     top: 0;
@@ -49,9 +49,9 @@
     right: 0;
     bottom: 0;
     background: var(--skeleton-bg-animation-color);
-} .skeleton__animate_b4xf7:before {
+} .skeleton__animate_xcuwx:before {
     display: var(--skeleton-bg-animation-display);
-    animation-name: skeleton__background_b4xf7;
+    animation-name: skeleton__background_xcuwx;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
@@ -59,10 +59,10 @@
     animation-play-state: running;
     opacity: 0.5;
 } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-    .skeleton__animate_b4xf7:before {
+    .skeleton__animate_xcuwx:before {
         opacity: 0.4;
     }
-} .skeleton__animate_b4xf7:after {
+} .skeleton__animate_xcuwx:after {
     display: var(--skeleton-gradient-animation-display);
     content: '';
     position: absolute;
@@ -71,7 +71,7 @@
     width: 500%;
     height: 100%;
     transform: translateX(-80%);
-    animation-name: skeleton__gradient_b4xf7;
+    animation-name: skeleton__gradient_xcuwx;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
@@ -83,7 +83,7 @@
         rgba(0, 0, 0, 0) 60%,
         rgba(0, 0, 0, 0)
     );
-} @keyframes skeleton__gradient_b4xf7 {
+} @keyframes skeleton__gradient_xcuwx {
     0% {
         transform: translateX(-80%);
     }
@@ -93,7 +93,7 @@
     100% {
         transform: translateX(0);
     }
-} @keyframes skeleton__background_b4xf7 {
+} @keyframes skeleton__background_xcuwx {
     0% {
         background: rgb(182, 188, 195);
     }

package/slider/Component.d.ts

@@ -40,9 +40,14 @@ type SliderProps = {
      */
     range?: RangeOptions;
     /**
-     * Значение инпута
+     * Значение слайдера
      */
     value?: number;
+    /**
+     * Второе значение слайдера (значение второго ползунка)
+     * если передать ValueTo, то слайдер будет работать как range
+     */
+    valueTo?: number;
     /**
      * Заблокированное состояние
      */
@@ -51,6 +56,10 @@ type SliderProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Поведение ползунка
+     */
+    behaviour?: 'unconstrained-tap' | 'tap';
     /**
      * Размер
      */
@@ -60,6 +69,7 @@ type SliderProps = {
      */
     onChange?: (payload: {
         value: number;
+        valueTo?: number;
     }) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования

package/slider/Component.js

@@ -11,20 +11,22 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var noUiSlider__default = /*#__PURE__*/_interopDefaultCompat(noUiSlider);
 
-var styles = {"component":"slider__component_3pihc","s":"slider__s_3pihc","m":"slider__m_3pihc"};
+var styles = {"component":"slider__component_17zzp","s":"slider__s_17zzp","m":"slider__m_17zzp"};
 require('./index.css');
 
 var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, disabled = _a.disabled, pips = _a.pips, _f = _a.range, range = _f === void 0 ? { min: min, max: max } : _f, _g = _a.size, size = _g === void 0 ? 's' : _g, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, valueTo = _a.valueTo, disabled = _a.disabled, pips = _a.pips, _f = _a.behaviour, behaviour = _f === void 0 ? 'tap' : _f, _g = _a.range, range = _g === void 0 ? { min: min, max: max } : _g, _h = _a.size, size = _h === void 0 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
     var sliderRef = React.useRef(null);
     var busyRef = React.useRef(false);
+    var hasValueTo = valueTo !== undefined;
     var getSlider = function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.noUiSlider; };
     React.useEffect(function () {
         if (!sliderRef.current)
             return;
         var slider = noUiSlider__default.default.create(sliderRef.current, {
-            start: [value],
-            connect: [true, false],
+            start: valueTo ? [value, valueTo] : value,
+            connect: valueTo ? true : [true, false],
+            behaviour: behaviour,
             step: step,
             pips: pips,
             range: range,
@@ -50,21 +52,40 @@ var Slider = function (_a) {
     React.useEffect(function () {
         var slider = getSlider();
         // Пропускаем обновление, если происходит взаимодействие со слайдером
-        if (slider && busyRef.current === false)
-            slider.set(value, false);
-    }, [value]);
+        if (slider && busyRef.current === false) {
+            if (valueTo) {
+                slider.set([value, valueTo], false);
+            }
+            else {
+                slider.set(value, false);
+            }
+        }
+    }, [value, valueTo]);
     React.useEffect(function () {
         var slider = getSlider();
         if (!slider)
             return;
         var handler = function () {
             if (onChange) {
-                onChange({ value: Number(slider.get()) });
+                if (hasValueTo) {
+                    var sliderValues = slider.get();
+                    var from = Number(sliderValues[0]);
+                    var to = Number(sliderValues[1]);
+                    if (from <= to) {
+                        onChange({ value: from, valueTo: to });
+                    }
+                    else {
+                        onChange({ value: to, valueTo: from });
+                    }
+                }
+                else {
+                    onChange({ value: Number(slider.get()) });
+                }
             }
         };
         slider.off('slide');
         slider.on('slide', handler);
-    }, [onChange]);
+    }, [onChange, hasValueTo]);
     return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles.component, className, styles[size]), ref: sliderRef, "data-test-id": dataTestId }, { disabled: disabled })));
 };
 

package/slider/cssm/Component.d.ts

@@ -40,9 +40,14 @@ type SliderProps = {
      */
     range?: RangeOptions;
     /**
-     * Значение инпута
+     * Значение слайдера
      */
     value?: number;
+    /**
+     * Второе значение слайдера (значение второго ползунка)
+     * если передать ValueTo, то слайдер будет работать как range
+     */
+    valueTo?: number;
     /**
      * Заблокированное состояние
      */
@@ -51,6 +56,10 @@ type SliderProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Поведение ползунка
+     */
+    behaviour?: 'unconstrained-tap' | 'tap';
     /**
      * Размер
      */
@@ -60,6 +69,7 @@ type SliderProps = {
      */
     onChange?: (payload: {
         value: number;
+        valueTo?: number;
     }) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования

package/slider/cssm/Component.js

@@ -14,16 +14,18 @@ var noUiSlider__default = /*#__PURE__*/_interopDefaultCompat(noUiSlider);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, disabled = _a.disabled, pips = _a.pips, _f = _a.range, range = _f === void 0 ? { min: min, max: max } : _f, _g = _a.size, size = _g === void 0 ? 's' : _g, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, valueTo = _a.valueTo, disabled = _a.disabled, pips = _a.pips, _f = _a.behaviour, behaviour = _f === void 0 ? 'tap' : _f, _g = _a.range, range = _g === void 0 ? { min: min, max: max } : _g, _h = _a.size, size = _h === void 0 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
     var sliderRef = React.useRef(null);
     var busyRef = React.useRef(false);
+    var hasValueTo = valueTo !== undefined;
     var getSlider = function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.noUiSlider; };
     React.useEffect(function () {
         if (!sliderRef.current)
             return;
         var slider = noUiSlider__default.default.create(sliderRef.current, {
-            start: [value],
-            connect: [true, false],
+            start: valueTo ? [value, valueTo] : value,
+            connect: valueTo ? true : [true, false],
+            behaviour: behaviour,
             step: step,
             pips: pips,
             range: range,
@@ -49,21 +51,40 @@ var Slider = function (_a) {
     React.useEffect(function () {
         var slider = getSlider();
         // Пропускаем обновление, если происходит взаимодействие со слайдером
-        if (slider && busyRef.current === false)
-            slider.set(value, false);
-    }, [value]);
+        if (slider && busyRef.current === false) {
+            if (valueTo) {
+                slider.set([value, valueTo], false);
+            }
+            else {
+                slider.set(value, false);
+            }
+        }
+    }, [value, valueTo]);
     React.useEffect(function () {
         var slider = getSlider();
         if (!slider)
             return;
         var handler = function () {
             if (onChange) {
-                onChange({ value: Number(slider.get()) });
+                if (hasValueTo) {
+                    var sliderValues = slider.get();
+                    var from = Number(sliderValues[0]);
+                    var to = Number(sliderValues[1]);
+                    if (from <= to) {
+                        onChange({ value: from, valueTo: to });
+                    }
+                    else {
+                        onChange({ value: to, valueTo: from });
+                    }
+                }
+                else {
+                    onChange({ value: Number(slider.get()) });
+                }
             }
         };
         slider.off('slide');
         slider.on('slide', handler);
-    }, [onChange]);
+    }, [onChange, hasValueTo]);
     return (React__default.default.createElement("div", tslib.__assign({ className: cn__default.default(styles__default.default.component, className, styles__default.default[size]), ref: sliderRef, "data-test-id": dataTestId }, { disabled: disabled })));
 };
 

package/slider/esm/Component.d.ts

@@ -40,9 +40,14 @@ type SliderProps = {
      */
     range?: RangeOptions;
     /**
-     * Значение инпута
+     * Значение слайдера
      */
     value?: number;
+    /**
+     * Второе значение слайдера (значение второго ползунка)
+     * если передать ValueTo, то слайдер будет работать как range
+     */
+    valueTo?: number;
     /**
      * Заблокированное состояние
      */
@@ -51,6 +56,10 @@ type SliderProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Поведение ползунка
+     */
+    behaviour?: 'unconstrained-tap' | 'tap';
     /**
      * Размер
      */
@@ -60,6 +69,7 @@ type SliderProps = {
      */
     onChange?: (payload: {
         value: number;
+        valueTo?: number;
     }) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования

package/slider/esm/Component.js

@@ -3,20 +3,22 @@ import React, { useRef, useEffect } from 'react';
 import cn from 'classnames';
 import noUiSlider from 'nouislider';
 
-var styles = {"component":"slider__component_3pihc","s":"slider__s_3pihc","m":"slider__m_3pihc"};
+var styles = {"component":"slider__component_17zzp","s":"slider__s_17zzp","m":"slider__m_17zzp"};
 require('./index.css');
 
 var Slider = function (_a) {
-    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, disabled = _a.disabled, pips = _a.pips, _f = _a.range, range = _f === void 0 ? { min: min, max: max } : _f, _g = _a.size, size = _g === void 0 ? 's' : _g, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, _e = _a.value, value = _e === void 0 ? 0 : _e, valueTo = _a.valueTo, disabled = _a.disabled, pips = _a.pips, _f = _a.behaviour, behaviour = _f === void 0 ? 'tap' : _f, _g = _a.range, range = _g === void 0 ? { min: min, max: max } : _g, _h = _a.size, size = _h === void 0 ? 's' : _h, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId;
     var sliderRef = useRef(null);
     var busyRef = useRef(false);
+    var hasValueTo = valueTo !== undefined;
     var getSlider = function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.noUiSlider; };
     useEffect(function () {
         if (!sliderRef.current)
             return;
         var slider = noUiSlider.create(sliderRef.current, {
-            start: [value],
-            connect: [true, false],
+            start: valueTo ? [value, valueTo] : value,
+            connect: valueTo ? true : [true, false],
+            behaviour: behaviour,
             step: step,
             pips: pips,
             range: range,
@@ -42,21 +44,40 @@ var Slider = function (_a) {
     useEffect(function () {
         var slider = getSlider();
         // Пропускаем обновление, если происходит взаимодействие со слайдером
-        if (slider && busyRef.current === false)
-            slider.set(value, false);
-    }, [value]);
+        if (slider && busyRef.current === false) {
+            if (valueTo) {
+                slider.set([value, valueTo], false);
+            }
+            else {
+                slider.set(value, false);
+            }
+        }
+    }, [value, valueTo]);
     useEffect(function () {
         var slider = getSlider();
         if (!slider)
             return;
         var handler = function () {
             if (onChange) {
-                onChange({ value: Number(slider.get()) });
+                if (hasValueTo) {
+                    var sliderValues = slider.get();
+                    var from = Number(sliderValues[0]);
+                    var to = Number(sliderValues[1]);
+                    if (from <= to) {
+                        onChange({ value: from, valueTo: to });
+                    }
+                    else {
+                        onChange({ value: to, valueTo: from });
+                    }
+                }
+                else {
+                    onChange({ value: Number(slider.get()) });
+                }
             }
         };
         slider.off('slide');
         slider.on('slide', handler);
-    }, [onChange]);
+    }, [onChange, hasValueTo]);
     return (React.createElement("div", __assign({ className: cn(styles.component, className, styles[size]), ref: sliderRef, "data-test-id": dataTestId }, { disabled: disabled })));
 };
 

package/slider/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: l4s3b */
+/* hash: 1syc6 */
 :root {
     --color-red-dark: #d91d0b;
 } /* deprecated */ :root {
@@ -44,32 +44,32 @@
     /* Отступы по бокам — на мобилке thumb не должен заходить за края контрола */
     --slider-origin-width: 100%;
     --slider-origin-right: 0;
-} .slider__component_3pihc {
+} .slider__component_17zzp {
     width: 100%;
     padding-top: var(--slider-progress-s-height);
     position: relative
-} .slider__component_3pihc .noUi-base:hover .noUi-connects {
+} .slider__component_17zzp .noUi-base:hover .noUi-connects {
             background: var(--slider-progress-hover-background);
-        } .slider__component_3pihc .noUi-base:hover .noUi-connect {
+        } .slider__component_17zzp .noUi-base:hover .noUi-connect {
             background: var(--slider-progress-hover-color);
-        } .slider__component_3pihc .noUi-handle:hover .noUi-touch-area {
+        } .slider__component_17zzp .noUi-handle:hover .noUi-touch-area {
         background: var(--slider-thumb-hover-color);
-    } .slider__component_3pihc .noUi-handle:active .noUi-touch-area {
+    } .slider__component_17zzp .noUi-handle:active .noUi-touch-area {
         background: var(--slider-thumb-active-color);
-    } .slider__component_3pihc .noUi-base {
+    } .slider__component_17zzp .noUi-base {
         position: absolute;
         width: 100%;
         height: var(--slider-clickable-area-size);
         transform: translateY(-50%);
 
         cursor: pointer;
-    } .slider__component_3pihc .noUi-origin {
+    } .slider__component_17zzp .noUi-origin {
         width: var(--slider-origin-width);
         position: absolute;
         top: 0;
         right: var(--slider-origin-right);
         height: 0;
-    } .slider__component_3pihc .noUi-connects {
+    } .slider__component_17zzp .noUi-connects {
         width: 100%;
         height: 100%;
         position: relative;
@@ -77,7 +77,7 @@
         transition: background 0.15s;
         z-index: 1;
         overflow: visible;
-    } .slider__component_3pihc .noUi-connect {
+    } .slider__component_17zzp .noUi-connect {
         background: var(--slider-progress-color);
         position: absolute;
         z-index: 1;
@@ -88,7 +88,7 @@
         transform-style: flat;
         will-change: transform;
         transform-origin: 0 0;
-    } .slider__component_3pihc .noUi-handle {
+    } .slider__component_17zzp .noUi-handle {
         position: absolute;
         top: calc((var(--slider-thumb-half-size) - var(--slider-clickable-area-half-size)) * -1);
         right: calc(var(--slider-thumb-half-size) * -1);
@@ -102,12 +102,12 @@
         cursor: grab;
         outline: none;
         transition: background 0.15s;
-    } .slider__component_3pihc .noUi-touch-area {
+    } .slider__component_17zzp .noUi-touch-area {
         border-radius: var(--border-radius-circle);
         background: var(--slider-thumb-color);
         width: 100%;
         height: 100%;
-    } .slider__component_3pihc .noUi-pips {
+    } .slider__component_17zzp .noUi-pips {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
@@ -116,29 +116,29 @@
         color: var(--color-light-text-secondary);
         position: relative;
         width: 100%;
-    } .slider__component_3pihc .noUi-marker {
+    } .slider__component_17zzp .noUi-marker {
         display: none;
-    } .slider__component_3pihc .noUi-value {
+    } .slider__component_17zzp .noUi-value {
         position: absolute;
         white-space: nowrap;
         text-align: center;
         top: 0;
         transform: translateX(-50%)
-    } .slider__component_3pihc .noUi-value:nth-child(2) {
+    } .slider__component_17zzp .noUi-value:nth-child(2) {
             transform: none;
-        } .slider__component_3pihc .noUi-value:last-child {
+        } .slider__component_17zzp .noUi-value:last-child {
             transform: translateX(-100%);
-        } .slider__s_3pihc .noUi-base {
+        } .slider__s_17zzp .noUi-base {
         border-radius: var(--slider-progress-s-border-radius);
         top: calc(var(--slider-progress-s-height) / 2);
-    } .slider__s_3pihc .noUi-connects {
+    } .slider__s_17zzp .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-s-height) / 2);
         height: var(--slider-progress-s-height);
         border-radius: var(--slider-progress-s-border-radius);
-    } .slider__m_3pihc .noUi-base {
+    } .slider__m_17zzp .noUi-base {
         border-radius: var(--slider-progress-m-border-radius);
         top: calc(var(--slider-progress-m-height) / 2);
-    } .slider__m_3pihc .noUi-connects {
+    } .slider__m_17zzp .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-m-height) / 2);
         height: var(--slider-progress-m-height);
         border-radius: var(--slider-progress-m-border-radius);

package/slider/index.css

@@ -1,4 +1,4 @@
-/* hash: l4s3b */
+/* hash: 1syc6 */
 :root {
     --color-red-dark: #d91d0b;
 } /* deprecated */ :root {
@@ -44,32 +44,32 @@
     /* Отступы по бокам — на мобилке thumb не должен заходить за края контрола */
     --slider-origin-width: 100%;
     --slider-origin-right: 0;
-} .slider__component_3pihc {
+} .slider__component_17zzp {
     width: 100%;
     padding-top: var(--slider-progress-s-height);
     position: relative
-} .slider__component_3pihc .noUi-base:hover .noUi-connects {
+} .slider__component_17zzp .noUi-base:hover .noUi-connects {
             background: var(--slider-progress-hover-background);
-        } .slider__component_3pihc .noUi-base:hover .noUi-connect {
+        } .slider__component_17zzp .noUi-base:hover .noUi-connect {
             background: var(--slider-progress-hover-color);
-        } .slider__component_3pihc .noUi-handle:hover .noUi-touch-area {
+        } .slider__component_17zzp .noUi-handle:hover .noUi-touch-area {
         background: var(--slider-thumb-hover-color);
-    } .slider__component_3pihc .noUi-handle:active .noUi-touch-area {
+    } .slider__component_17zzp .noUi-handle:active .noUi-touch-area {
         background: var(--slider-thumb-active-color);
-    } .slider__component_3pihc .noUi-base {
+    } .slider__component_17zzp .noUi-base {
         position: absolute;
         width: 100%;
         height: var(--slider-clickable-area-size);
         transform: translateY(-50%);
 
         cursor: pointer;
-    } .slider__component_3pihc .noUi-origin {
+    } .slider__component_17zzp .noUi-origin {
         width: var(--slider-origin-width);
         position: absolute;
         top: 0;
         right: var(--slider-origin-right);
         height: 0;
-    } .slider__component_3pihc .noUi-connects {
+    } .slider__component_17zzp .noUi-connects {
         width: 100%;
         height: 100%;
         position: relative;
@@ -77,7 +77,7 @@
         transition: background 0.15s;
         z-index: 1;
         overflow: visible;
-    } .slider__component_3pihc .noUi-connect {
+    } .slider__component_17zzp .noUi-connect {
         background: var(--slider-progress-color);
         position: absolute;
         z-index: 1;
@@ -88,7 +88,7 @@
         transform-style: flat;
         will-change: transform;
         transform-origin: 0 0;
-    } .slider__component_3pihc .noUi-handle {
+    } .slider__component_17zzp .noUi-handle {
         position: absolute;
         top: calc((var(--slider-thumb-half-size) - var(--slider-clickable-area-half-size)) * -1);
         right: calc(var(--slider-thumb-half-size) * -1);
@@ -102,12 +102,12 @@
         cursor: grab;
         outline: none;
         transition: background 0.15s;
-    } .slider__component_3pihc .noUi-touch-area {
+    } .slider__component_17zzp .noUi-touch-area {
         border-radius: var(--border-radius-circle);
         background: var(--slider-thumb-color);
         width: 100%;
         height: 100%;
-    } .slider__component_3pihc .noUi-pips {
+    } .slider__component_17zzp .noUi-pips {
         font-size: 14px;
         line-height: 18px;
         font-weight: 400;
@@ -116,29 +116,29 @@
         color: var(--color-light-text-secondary);
         position: relative;
         width: 100%;
-    } .slider__component_3pihc .noUi-marker {
+    } .slider__component_17zzp .noUi-marker {
         display: none;
-    } .slider__component_3pihc .noUi-value {
+    } .slider__component_17zzp .noUi-value {
         position: absolute;
         white-space: nowrap;
         text-align: center;
         top: 0;
         transform: translateX(-50%)
-    } .slider__component_3pihc .noUi-value:nth-child(2) {
+    } .slider__component_17zzp .noUi-value:nth-child(2) {
             transform: none;
-        } .slider__component_3pihc .noUi-value:last-child {
+        } .slider__component_17zzp .noUi-value:last-child {
             transform: translateX(-100%);
-        } .slider__s_3pihc .noUi-base {
+        } .slider__s_17zzp .noUi-base {
         border-radius: var(--slider-progress-s-border-radius);
         top: calc(var(--slider-progress-s-height) / 2);
-    } .slider__s_3pihc .noUi-connects {
+    } .slider__s_17zzp .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-s-height) / 2);
         height: var(--slider-progress-s-height);
         border-radius: var(--slider-progress-s-border-radius);
-    } .slider__m_3pihc .noUi-base {
+    } .slider__m_17zzp .noUi-base {
         border-radius: var(--slider-progress-m-border-radius);
         top: calc(var(--slider-progress-m-height) / 2);
-    } .slider__m_3pihc .noUi-connects {
+    } .slider__m_17zzp .noUi-connects {
         top: calc(var(--slider-clickable-area-half-size) - var(--slider-progress-m-height) / 2);
         height: var(--slider-progress-m-height);
         border-radius: var(--slider-progress-m-border-radius);

package/slider/modern/Component.d.ts

@@ -40,9 +40,14 @@ type SliderProps = {
      */
     range?: RangeOptions;
     /**
-     * Значение инпута
+     * Значение слайдера
      */
     value?: number;
+    /**
+     * Второе значение слайдера (значение второго ползунка)
+     * если передать ValueTo, то слайдер будет работать как range
+     */
+    valueTo?: number;
     /**
      * Заблокированное состояние
      */
@@ -51,6 +56,10 @@ type SliderProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Поведение ползунка
+     */
+    behaviour?: 'unconstrained-tap' | 'tap';
     /**
      * Размер
      */
@@ -60,6 +69,7 @@ type SliderProps = {
      */
     onChange?: (payload: {
         value: number;
+        valueTo?: number;
     }) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования