@synerise/ds-slider 1.0.30 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.31...@synerise/ds-slider@1.1.0) (2026-01-22)
+
+### Features
+
+- **slider:** migrated from antd to tanstack ranger lib ([0c287c1](https://github.com/Synerise/synerise-design/commit/0c287c135d91180a143221bc273821828ad7efdc))
+
+## [1.0.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.30...@synerise/ds-slider@1.0.31) (2026-01-15)
+
+**Note:** Version bump only for package @synerise/ds-slider
+
 ## [1.0.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-slider@1.0.29...@synerise/ds-slider@1.0.30) (2026-01-12)
 
 **Note:** Version bump only for package @synerise/ds-slider

package/dist/Slider.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-import '@synerise/ds-core/dist/js/style';
 import { type SliderProps } from './Slider.types';
-import './style/index.less';
 declare const Slider: (props: SliderProps) => React.JSX.Element;
 export default Slider;

package/dist/Slider.js

@@ -1,104 +1,20 @@
-var _excluded = ["useColorPalette", "label", "inverted", "getTooltipPopupContainer", "tracksColorMap", "type", "thickness", "description", "tipFormatter", "allocationConfig", "hideMinAndMaxMarks", "disabled", "max", "min", "value", "range", "tooltipVisible", "tooltipPlacement"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import '@synerise/ds-core/dist/js/style';
-import { Label } from '@synerise/ds-typography';
-import Allocation from './Allocation/Allocation';
-import * as S from './Slider.styles';
-import { SliderTypes } from './Slider.types';
-import "./style/index.css";
-import { buildDefaultTracksColorMap, couldBeInverted, getDefaultTooltipPopupContainer } from './utils/Slider.utils';
+import React from 'react';
+import { AllocationSlider } from './components/AllocationSlider';
+import { DefaultSlider } from './components/DefaultSlider';
+import { RangeSlider } from './components/RangeSlider';
+var isRangeSlider = function isRangeSlider(props) {
+  return 'range' in props && props.range;
+};
+var isAllocationSlider = function isAllocationSlider(props) {
+  return 'type' in props && props.type === 'allocation';
+};
 var Slider = function Slider(props) {
-  var useColorPalette = props.useColorPalette,
-    label = props.label,
-    inverted = props.inverted,
-    getTooltipPopupContainer = props.getTooltipPopupContainer,
-    _props$tracksColorMap = props.tracksColorMap,
-    tracksColorMap = _props$tracksColorMap === void 0 ? buildDefaultTracksColorMap() : _props$tracksColorMap,
-    type = props.type,
-    thickness = props.thickness,
-    description = props.description,
-    _tipFormatter = props.tipFormatter,
-    allocationConfig = props.allocationConfig,
-    hideMinAndMaxMarks = props.hideMinAndMaxMarks,
-    disabled = props.disabled,
-    max = props.max,
-    min = props.min,
-    value = props.value,
-    range = props.range,
-    tooltipVisible = props.tooltipVisible,
-    _props$tooltipPlaceme = props.tooltipPlacement,
-    tooltipPlacement = _props$tooltipPlaceme === void 0 ? 'bottom' : _props$tooltipPlaceme,
-    antdProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var _useState = useState(false),
-    reachedEnd = _useState[0],
-    setReachedEnd = _useState[1];
-  var _useState2 = useState(false),
-    reachedStart = _useState2[0],
-    setReachedStart = _useState2[1];
-  var showValueTooltip = useMemo(function () {
-    return tooltipVisible !== false && (!antdProps.tooltip || antdProps.tooltip.open !== false);
-  }, [tooltipVisible, antdProps.tooltip]);
-  var calcHandlePosition = useCallback(function () {
-    var handler = document.querySelectorAll('.ant-slider-handle');
-    var markTexts = document.querySelectorAll('.ant-slider-mark-text');
-    if (handler && markTexts != null && markTexts.length && showValueTooltip) {
-      var firstMark = markTexts[0].getBoundingClientRect();
-      var lastMark = markTexts[markTexts.length - 1].getBoundingClientRect();
-      var firstHandler = handler[0].getBoundingClientRect();
-      var lastHandler = handler[handler.length - 1].getBoundingClientRect();
-      if (firstMark.x + 10 + firstMark.width > firstHandler.x || firstMark.x + 10 + firstMark.width > lastHandler.x) {
-        setReachedStart(true);
-      } else {
-        setReachedStart(false);
-      }
-      if (lastMark.x - 30 < firstHandler.x || lastMark.x - 30 < lastHandler.x) {
-        setReachedEnd(true);
-      } else {
-        setReachedEnd(false);
-      }
-    }
-    return {
-      reachedEnd: reachedEnd,
-      reachedStart: reachedStart
-    };
-  }, [reachedEnd, reachedStart, showValueTooltip]);
-  useEffect(function () {
-    setTimeout(function () {
-      calcHandlePosition();
-    }, 0);
-  }, [calcHandlePosition, value]);
-  var labelElement = useMemo(function () {
-    return label ? /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(Label, null, label)) : null;
-  }, [label]);
-  if (type === SliderTypes.ALLOCATION && !!allocationConfig) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, labelElement, /*#__PURE__*/React.createElement(Allocation, props));
+  if (isAllocationSlider(props)) {
+    return /*#__PURE__*/React.createElement(AllocationSlider, props);
+  }
+  if (isRangeSlider(props)) {
+    return /*#__PURE__*/React.createElement(RangeSlider, props);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, labelElement, /*#__PURE__*/React.createElement(S.AntdSlider, _extends({}, antdProps, {
-    min: min,
-    max: max,
-    value: value,
-    reachedEnd: reachedEnd,
-    tooltip: _extends({}, antdProps.tooltip, {
-      placement: tooltipPlacement,
-      open: tooltipVisible
-    }),
-    range: range,
-    reachedStart: reachedStart,
-    className: value && couldBeInverted(value, !!inverted) ? 'ant-slider-inverted' : undefined,
-    useColorPalette: useColorPalette,
-    thickness: thickness,
-    disabled: disabled,
-    description: description,
-    hideMinAndMaxMarks: hideMinAndMaxMarks,
-    tipFormatter: function tipFormatter(tipValue) {
-      return /*#__PURE__*/React.createElement(S.DescriptionWrapper, null, description && /*#__PURE__*/React.createElement(S.Description, {
-        range: Boolean(range)
-      }, description), _tipFormatter && _tipFormatter(tipValue));
-    },
-    tracksColorMap: tracksColorMap,
-    getTooltipPopupContainer: getTooltipPopupContainer || getDefaultTooltipPopupContainer
-  })));
+  return /*#__PURE__*/React.createElement(DefaultSlider, props);
 };
 export default Slider;

package/dist/Slider.styles.d.ts

@@ -1,33 +1,41 @@
-import { type SliderRangeProps, type SliderSingleProps } from 'antd/lib/slider';
-import { type ComponentType } from 'react';
-import { type ThemeProps } from '@synerise/ds-core';
-import { type ColorMapProps, type SliderProps as DsSliderProps } from './Slider.types';
-type SliderProps = SliderSingleProps | SliderRangeProps;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {
-    range?: boolean;
-}, never>;
-export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const applyTooltipStyles: (props: ThemeProps & DsSliderProps & SliderStyles) => import("styled-components").FlattenSimpleInterpolation;
-export declare const createTracksStyles: (props: ThemeProps, colorsMap: ColorMapProps) => import("styled-components").FlattenSimpleInterpolation;
-type SliderStyles = {
-    reachedEnd?: boolean;
-    reachedStart?: boolean;
-};
-export declare const AntdSlider: import("styled-components").StyledComponent<ComponentType<Omit<SliderProps, "value">>, any, import("./Slider.types").AntdSliderProps & {
-    type?: "allocation" | "default";
-    allocationConfig?: import("./Allocation/Allocation.types").AllocationConfig;
-    label?: import("react").ReactNode;
-    value?: number | number[];
-    inverted?: boolean;
-    useColorPalette?: boolean;
-    autoFocus?: boolean;
-    tracksColorMap?: ColorMapProps;
-    thickness?: number;
-    description?: import("react").ReactNode;
-    children?: import("react").ReactNode;
-    hideMinAndMaxMarks?: boolean;
-    disabled?: boolean;
-    handlers?: import("./Slider.types").HandlerConfig;
-} & SliderStyles, never>;
-export {};
+export declare const SliderSection: import("styled-components").StyledComponent<"div", any, {
+    $left: number;
+    $width: number;
+    $color: string;
+}, never>;
+export declare const SliderLine: import("styled-components").StyledComponent<"div", any, {
+    thick?: boolean;
+    lineColor?: string;
+}, never>;
+export declare const SliderMarks: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SliderMark: import("styled-components").StyledComponent<"div", any, {
+    $left: number;
+    isNear: boolean;
+}, never>;
+export declare const EventTrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SliderHandleWrapper: import("styled-components").StyledComponent<"div", any, {
+    $left: number;
+    isActive?: boolean;
+    $disabled?: boolean;
+    $blocked?: boolean;
+}, never>;
+export declare const SliderHandleValue: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean;
+}, never>;
+export declare const SliderHandle: import("styled-components").StyledComponent<"button", any, {
+    isActive?: boolean;
+    $disabled?: boolean;
+    $blocked?: boolean;
+}, never>;
+export declare const SliderBar: import("styled-components").StyledComponent<"div", any, {
+    $type: "allocation" | "default" | "range";
+}, never>;
+export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, {
+    $disabled?: boolean;
+    withoutMarks?: boolean;
+}, never>;
+export declare const SliderDot: import("styled-components").StyledComponent<"div", any, {
+    $left: number;
+    $color?: string;
+}, never>;
+export declare const SliderLabel: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Slider.styles.js

@@ -1,60 +1,93 @@
-import Slider from 'antd/lib/slider';
 import styled, { css } from 'styled-components';
-var INDEX_MAP = {
-  '0': 'green-600',
-  '1': 'cyan-600',
-  '2': 'yellow-600',
-  '3': 'orange-600',
-  '4': 'mars-600',
-  '5': 'pink-600',
-  '6': 'purple-600',
-  '7': 'red-600',
-  '8': 'violet-600',
-  '9': 'fern-600'
-};
-export var Description = styled.div.withConfig({
-  displayName: "Sliderstyles__Description",
+export var SliderSection = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderSection",
   componentId: "sc-1gtvqj9-0"
-})(["bottom:70px;color:", ";font-weight:400;position:absolute;opacity:", ";"], function (props) {
-  return props.theme.palette['grey-500'];
+})(["left:", "%;width:", "%;position:absolute;height:100%;background:", ";"], function (props) {
+  return props.$left;
 }, function (props) {
-  return props.range ? '0' : '1';
+  return props.$width;
+}, function (props) {
+  return props.$color;
 });
-export var LabelWrapper = styled.div.withConfig({
-  displayName: "Sliderstyles__LabelWrapper",
+export var SliderLine = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderLine",
   componentId: "sc-1gtvqj9-1"
-})(["margin-left:-2px;padding-bottom:0px;"]);
-export var DescriptionWrapper = styled.div.withConfig({
-  displayName: "Sliderstyles__DescriptionWrapper",
+})(["height:", ";background:", ";position:absolute;top:50%;width:100%;transform:translateY(-50%);z-index:10;border-radius:", ";", "{border-radius:", ";}"], function (props) {
+  return (props.thick ? '6' : '3') + "px";
+}, function (props) {
+  return props.theme.palette[props.lineColor || 'grey-200'];
+}, function (props) {
+  return (props.thick ? '6' : '3') + "px";
+}, SliderSection, function (props) {
+  return (props.thick ? '6' : '3') + "px";
+});
+export var SliderMarks = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderMarks",
   componentId: "sc-1gtvqj9-2"
-})(["display:flex;direction:column;align-items:center;justify-content:center;position:relative;user-select:none;pointer-events:none;bottom:0;right:0;"]);
-export var applyTooltipStyles = function applyTooltipStyles(props) {
-  return css([".ant-tooltip-inner{font-size:13px;padding:3px 7px;user-select:none;white-space:nowrap;}", " &&&.ant-slider-disabled{.ant-slider-dot-active{background-color:", ";}.ant-slider-rail{background-color:", ";}}.ant-slider-handle:hover,.ant-slider-handle:focus{", "}", " .ant-slider-handle:hover:not(:focus){background-color:", ";}.ant-slider-handle:not(:focus){.ant-tooltip-content:hover{background-color:transparent !important;border-radius:3px;}.ant-tooltip-inner:hover{color:", " !important;}}.ant-slider-dot[style*='left: 100%;'],.ant-slider-dot:first-of-type{visibility:", ";}.ant-slider-mark-text:last-of-type{padding-right:30px;}.ant-slider-mark-text:last-of-type{", "}.ant-slider-mark-text:first-of-type{", "}.ant-slider-handle-dragging{border-color:", " !important;box-shadow:0 0 0 3px rgba(35,138,254,0.25) !important;}"], props.disabled && ".ant-tooltip-inner {\n        color: " + props.theme.palette['grey-400'] + ";\n      }\n  &&&.ant-slider {\n    .ant-slider-dot {\n       background-color: " + props.theme.palette['grey-200'] + ";\n    }\n  }\n ", props.theme.palette['grey-400'], props.theme.palette['grey-200'], !props.disabled && "\n    .ant-tooltip-content {\n      background-color: " + props.theme.palette['grey-900'] + ";\n      border-radius: 3px;\n    }\n    " + Description + " {\n      color: " + (!props.disabled && props.theme.palette['grey-600']) + ";\n    }\n    .ant-tooltip-inner {\n      color: " + props.theme.palette['grey-050'] + ";\n    }\n    ", !props.disabled && props.range && "\n    .ant-slider-handle:focus {\n      " + Description + " {\n         opacity: 1\n      }\n    }\n    ", !props.disabled && props.theme.palette['grey-500'], !props.disabled && props.theme.palette['grey-600'], props.hideMinAndMaxMarks ? 'hidden' : 'visible', props.reachedEnd && "opacity: 0", props.reachedStart && "opacity: 0", props.theme.palette['grey-050']);
-};
-export var createTracksStyles = function createTracksStyles(props, colorsMap) {
-  var styles = Object.values(colorsMap).map(function (color, index) {
-    return "\n      .ant-slider-segment-" + index + ",\n      .ant-slider-segment-letter-" + index + ",\n      .ant-slider-track-" + (index + 1) + ",\n      .ant-slider-track-" + (index + 11) + " {\n        background-color: " + props.theme.palette[color] + ";\n      }\n      .ant-slider-dot-active" + (index + 1) + ",\n      .ant-slider-dot-active" + (index + 11) + " {\n        background-color: " + props.theme.palette[color] + ";\n      }\n  ";
-  });
-  var style = styles.join('');
-  return css([".ant-slider-track{background-color:", ";}.ant-slider-dot-active{background-color:", ";}&.ant-slider-inverted{.ant-slider-dot{background-color:", ";&.ant-slider-dot-active{background-color:", ";}}.ant-slider-rail{background-color:", ";}.ant-slider-track{background-color:", ";}&&&.ant-slider-disabled{.ant-slider-rail{background-color:", ";}.ant-slider-dot{background-color:", " !important;border-color:", " !important;}.ant-slider-track{background-color:", " !important;}.ant-slider-dot-active{border-color:", " !important;}}}", ""], props.theme.palette[colorsMap[0]], props.theme.palette[colorsMap[0]], props.theme.palette[colorsMap[0]], props.theme.palette['grey-300'], props.theme.palette[colorsMap[0]], props.theme.palette['grey-200'], props.theme.palette['grey-400'], props.theme.palette['grey-050'], props.theme.palette['grey-400'], props.theme.palette['grey-200'], props.theme.palette['grey-200'], style);
-};
-export var AntdSlider = styled(Slider).withConfig({
-  displayName: "Sliderstyles__AntdSlider",
+})(["position:relative;height:18px;margin-top:-5px;&:empty{display:none;}"]);
+export var SliderMark = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderMark",
   componentId: "sc-1gtvqj9-3"
-})(["", " .ant-slider-track{height:", ";}&.ant-slider:hover{", ";}.ant-slider-rail{height:", ";}", " .ant-slider-handle{z-index:99;margin-top:", ";}.ant-slider-dot{margin-top:", ";}&&&.ant-slider{margin-top:", ";}"], function (props) {
-  return props.useColorPalette ? createTracksStyles(props, props.tracksColorMap ? props.tracksColorMap : INDEX_MAP) : css([""]);
+})(["position:absolute;bottom:0;left:", "%;transform:translateX( ", "% );z-index:10;", " width:max-content;max-width:100px;overflow-wrap:break-word;"], function (props) {
+  return props.$left;
+}, function (props) {
+  return props.$left < 1 ? '0' : props.$left > 99 ? '-100' : '-50';
 }, function (props) {
-  return props.thickness ? props.thickness + "px" : "3px";
+  return props.isNear && "visibility: hidden;";
+});
+export var EventTrap = styled.div.withConfig({
+  displayName: "Sliderstyles__EventTrap",
+  componentId: "sc-1gtvqj9-4"
+})(["display:contents:"]);
+export var SliderHandleWrapper = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderHandleWrapper",
+  componentId: "sc-1gtvqj9-5"
+})(["position:absolute;top:50%;left:", "%;z-index:20;"], function (props) {
+  return props.$left;
+});
+export var SliderHandleValue = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderHandleValue",
+  componentId: "sc-1gtvqj9-6"
+})(["position:absolute;top:16px;pointer-events:none;transform:translateX(-50%);padding:3px 8px;border-radius:3px;width:max-content;max-width:100px;overflow-wrap:break-word;", ""], function (props) {
+  return props.isActive ? css(["box-shadow:", ";background-color:rgba(56,67,80,0.9);color:", ";"], props.theme.variables['box-shadow-2'], props.theme.palette['white']) : css(["color:", ";"], props.theme.palette['grey-800']);
+});
+export var SliderHandle = styled.button.withConfig({
+  displayName: "Sliderstyles__SliderHandle",
+  componentId: "sc-1gtvqj9-7"
+})(["border:3px solid ", ";background:", ";position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;outline:none;border-radius:100%;z-index:20;cursor:pointer;transition-property:background,box-shadow;transition-duration:0.3s;", ";", ";"], function (props) {
+  return props.theme.palette.white;
 }, function (props) {
-  return props.useColorPalette ? createTracksStyles(props, props.tracksColorMap ? props.tracksColorMap : INDEX_MAP) : css([""]);
+  return props.theme.palette['grey-400'];
 }, function (props) {
-  return props.thickness ? props.thickness + "px" : "3px";
+  return props.isActive && css(["&,&:hover{background:", ";cursor:grabbing;}box-shadow:0 0 0 3px rgba(35,138,254,0.25);"], props.theme.palette['blue-600']);
 }, function (props) {
-  return applyTooltipStyles(props);
+  return (props.$disabled || props.$blocked) && css(["&,&:hover{background:", ";}box-shadow:none;"], props.theme.palette['grey-300']);
+});
+export var SliderBar = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderBar",
+  componentId: "sc-1gtvqj9-8"
+})(["position:relative;user-select:none;height:20px;", ""], function (props) {
+  return props.$type === 'allocation' && css(["margin-top:48px;"]);
+});
+export var SliderWrapper = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderWrapper",
+  componentId: "sc-1gtvqj9-9"
+})(["display:flex;flex:1 0 auto;flex-direction:column;gap:16px;", " ", ""], function (props) {
+  return props.withoutMarks && css(["padding-bottom:29px;"]);
 }, function (props) {
-  return props.thickness && props.thickness > 5 ? '-7px' : '-8px';
+  return !props.$disabled && css(["", "{cursor:pointer;&:hover{background-color:", ";}}"], SliderLine, props.theme.palette['grey-300']);
+});
+export var SliderDot = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderDot",
+  componentId: "sc-1gtvqj9-10"
+})(["position:absolute;bottom:0;width:10px;height:10px;background:", ";border-radius:50%;border:3px solid ", ";left:", "%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10;"], function (props) {
+  return props.theme.palette[props.$color || 'grey-200'];
 }, function (props) {
-  return props.thickness && props.thickness > 5 ? '0px' : '-1px';
+  return props.theme.palette.white;
 }, function (props) {
-  return props.description ? '38px' : '24px';
-});
+  return props.$left;
+});
+export var SliderLabel = styled.div.withConfig({
+  displayName: "Sliderstyles__SliderLabel",
+  componentId: "sc-1gtvqj9-11"
+})(["display:flex;flex-direction:column;gap:8px;"]);

package/dist/Slider.types.d.ts

@@ -1,34 +1,101 @@
-import type { SliderRangeProps, SliderSingleProps } from 'antd/lib/slider';
 import type { ReactNode } from 'react';
 import type { TooltipProps } from '@synerise/ds-tooltip';
-import { type AllocationConfig } from './Allocation/Allocation.types';
-type AntSliderProps = SliderSingleProps | SliderRangeProps;
-export type AntdSliderProps = Omit<AntSliderProps, 'value'>;
-export declare enum SliderTypes {
-    ALLOCATION = "allocation",
-    DEFAULT = "default"
-}
-export declare type ColorMapProps = {
-    [key: string]: string;
-};
+type AllocationType = 'allocation';
+export type SliderType = AllocationType | 'default';
+export type ColorMap = Record<number, string>;
+export type ColorsOrder = string[];
 export type HandlerConfig = Record<number, {
     blocked: boolean;
     blockedTooltipProps?: TooltipProps;
 }>;
-export type SliderProps = AntdSliderProps & {
-    type?: 'allocation' | 'default';
-    allocationConfig?: AllocationConfig;
-    label?: ReactNode;
-    value?: number | number[];
+export type MarkObj = {
+    style?: React.CSSProperties;
+    label?: React.ReactNode;
+};
+export type SliderMarks = Record<string | number, React.ReactNode | MarkObj>;
+export type DefaultValue = number;
+export type RangeValue = number[];
+export type RangeSliderProps = BaseSliderProps & SharedSliderProps & {
+    value?: RangeValue;
+    onChange?: (value: RangeValue) => void;
+    onAfterChange?: (value: RangeValue) => void;
+    range: true;
+};
+export type DefaultSliderProps = BaseSliderProps & SharedSliderProps & {
+    value?: DefaultValue;
+    onChange?: (value: DefaultValue) => void;
+    onAfterChange?: (value: DefaultValue) => void;
+};
+export type AllocationSliderProps = SharedSliderProps & {
+    type: AllocationType;
+    allocationConfig: AllocationConfig;
+    handlers?: HandlerConfig;
+};
+export type BaseSliderProps = {
+    /**
+     * inverts coloring of the slider
+     * Applies only when value is number or [number, number]
+     */
     inverted?: boolean;
-    useColorPalette?: boolean;
+    /**
+     * renders from right to left
+     */
+    reverse?: boolean;
+    /**
+     * slider scale marks
+     */
+    marks?: SliderMarks;
+    min?: number;
+    max?: number;
+    /**
+     * handle value formatter
+     */
+    tipFormatter?: ((value?: number) => ReactNode) | false;
+};
+export type SharedSliderProps = {
+    label?: ReactNode;
     autoFocus?: boolean;
-    tracksColorMap?: ColorMapProps;
-    thickness?: number;
+    tracksColorMap?: ColorMap;
+    thick?: boolean;
     description?: ReactNode;
-    children?: ReactNode;
-    hideMinAndMaxMarks?: boolean;
     disabled?: boolean;
-    handlers?: HandlerConfig;
+    step?: number;
+    /**
+     * renders dots for allowed handle positions (values)
+     * not recommended for low `step` prop values
+     */
+    dots?: boolean;
+};
+export type SliderProps = DefaultSliderProps | RangeSliderProps | AllocationSliderProps;
+export type AllocationConfig = {
+    controlGroupEnabled?: boolean;
+    controlGroupLabel?: ReactNode;
+    controlGroupTooltip?: ReactNode;
+    variants?: AllocationVariant[];
+    onAllocationChange?: (variants?: AllocationVariant[]) => void;
+};
+export type AllocationVariant = {
+    name: ReactNode;
+    percentage: number;
+    tabId: number;
+    tabLetter: ReactNode;
+    minPercentage?: number;
+};
+export type AllocationMark = {
+    value: string;
+    view: number;
+};
+export type DefinedCssRuleParameters = {
+    indexes: number[];
+    classConstPart: string;
+    cssRule: string;
+};
+export type SliderMarksProps = {
+    marks: SliderMarks;
+    handlesWithValue?: boolean;
+};
+export type MarkArea = {
+    left: number;
+    width: number;
 };
 export {};

package/dist/Slider.types.js

@@ -1,5 +1 @@
-export var SliderTypes = /*#__PURE__*/function (SliderTypes) {
-  SliderTypes["ALLOCATION"] = "allocation";
-  SliderTypes["DEFAULT"] = "default";
-  return SliderTypes;
-}({});
+export {};

package/dist/components/AllocationMarks.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type AllocationConfig, type AllocationVariant, type ColorMap } from '../Slider.types';
+type AllocationMarksProps = AllocationConfig & {
+    allocations: number[];
+    variants: AllocationVariant[];
+    tracksColorMap: ColorMap;
+};
+export declare const AllocationMarks: ({ controlGroupTooltip, controlGroupLabel, allocations, variants, tracksColorMap, }: AllocationMarksProps) => React.JSX.Element;
+export {};

package/dist/components/AllocationMarks.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Tooltip from '@synerise/ds-tooltip';
+import { useSliderContext } from '../context/SliderContext';
+import * as S from './AllocationMarks.styles';
+export var AllocationMarks = function AllocationMarks(_ref) {
+  var controlGroupTooltip = _ref.controlGroupTooltip,
+    controlGroupLabel = _ref.controlGroupLabel,
+    allocations = _ref.allocations,
+    variants = _ref.variants,
+    tracksColorMap = _ref.tracksColorMap;
+  var intl = useIntl();
+  var _useSliderContext = useSliderContext(),
+    rangerInstance = _useSliderContext.rangerInstance;
+  var renderMark = function renderMark(value, index, allocationVariants) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, allocationVariants[index] && /*#__PURE__*/React.createElement(Tooltip, {
+      title: /*#__PURE__*/React.createElement(S.MarkTooltipWrapper, null, allocationVariants[index].tabLetter)
+    }, /*#__PURE__*/React.createElement(S.MarkLetter, {
+      className: "ant-slider-segment-letter-" + index,
+      $color: tracksColorMap[index]
+    }, allocationVariants[index].tabLetter)), !allocationVariants[index] && /*#__PURE__*/React.createElement(Tooltip, {
+      title: controlGroupTooltip || intl.formatMessage({
+        id: 'DS.SLIDER.CONTROL-GROUP',
+        defaultMessage: 'Control group'
+      })
+    }, /*#__PURE__*/React.createElement(S.MarkLetter, {
+      $color: tracksColorMap[index]
+    }, controlGroupLabel || intl.formatMessage({
+      id: 'DS.SLIDER.CONTROL-GROUP-TOOLTIP',
+      defaultMessage: 'CG'
+    }))), /*#__PURE__*/React.createElement(S.MarkValue, null, value, "%"));
+  };
+  return /*#__PURE__*/React.createElement(S.AllocationMarks, {
+    "data-testid": "ds-allocation-marks"
+  }, rangerInstance.getSteps().map(function (section, index) {
+    return /*#__PURE__*/React.createElement(S.AllocationMark, {
+      key: "slider-allocation-mark-" + index,
+      $left: section.left,
+      $width: section.width
+    }, renderMark(allocations[index], index, variants || []));
+  }));
+};

package/dist/components/AllocationMarks.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const AllocationMarks: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AllocationMark: import("styled-components").StyledComponent<"div", any, {
+    $left: number;
+    $width: number;
+}, never>;
+export declare const MarkValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MarkLetter: import("styled-components").StyledComponent<"div", any, {
+    $color?: string;
+}, never>;
+export declare const MarkTooltipWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/AllocationMarks.styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+export var AllocationMarks = styled.div.withConfig({
+  displayName: "AllocationMarksstyles__AllocationMarks",
+  componentId: "sc-k03cw7-0"
+})(["height:40px;position:relative;margin-top:-16px;"]);
+export var AllocationMark = styled.div.withConfig({
+  displayName: "AllocationMarksstyles__AllocationMark",
+  componentId: "sc-k03cw7-1"
+})(["left:", "%;width:", "%;position:absolute;bottom:13px;height:80px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:none;"], function (props) {
+  return props.$left;
+}, function (props) {
+  return props.$width;
+});
+export var MarkValue = styled.div.withConfig({
+  displayName: "AllocationMarksstyles__MarkValue",
+  componentId: "sc-k03cw7-2"
+})([""]);
+export var MarkLetter = styled.div.withConfig({
+  displayName: "AllocationMarksstyles__MarkLetter",
+  componentId: "sc-k03cw7-3"
+})(["border-radius:", ";width:25px;height:25px;display:inline-block;position:relative;text-align:center;line-height:25px;color:white;background-color:", ";"], function (props) {
+  return props.theme.variable('@border-radius-base');
+}, function (props) {
+  return props.theme.palette[props.$color || 'grey-400'];
+});
+export var MarkTooltipWrapper = styled.div.withConfig({
+  displayName: "AllocationMarksstyles__MarkTooltipWrapper",
+  componentId: "sc-k03cw7-4"
+})(["display:block;width:100%;justify-content:center;text-align:center;min-width:14px;"]);

package/dist/components/AllocationSlider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { AllocationSliderProps } from '../Slider.types';
+export declare const AllocationSlider: ({ allocationConfig, tracksColorMap, description, handlers, step, label, thick, disabled, dots, }: Omit<AllocationSliderProps, "type">) => React.JSX.Element;