@sberbusiness/triplex-next-mcp-server 1.46.0-beta → 1.48.0-beta

package/bundle/components/SliderRange.md

@@ -1,8 +1,6 @@
 ---
 component: SliderRange
-category: Form Controls
-figma-node: ""
-figma-file: ""
+category: Slider
 related: [Slider, SliderExtended]
 tokens: []
 stories: stories/Slider/SliderRange.stories.tsx
@@ -13,148 +11,531 @@ version: "1.0"
 
 ## Назначение
 
-Готовый слайдер с **двумя** ползунками и закрашенной полосой между ними.
-Фиксированная компоновка: `Rail → Dot₁ → Track → Dot₂ → Marks`.
+Слайдер с двумя ползунками — готовая сборка `SliderExtended` для выбора диапазона: полоса,
+два ползунка, трек между ними и метки уже собраны, потребителю остаётся задать границы, шаг,
+метки и владеть парой значений.
 
-Используй когда: нужно выбрать **диапазон** `[a, b]` из `[min, max]`.
-Для одного значения — `Slider`. Для нестандартной компоновки — `SliderExtended`.
+Используй когда: пользователь выбирает диапазон из двух чисел и точность ввода не важна —
+сумма «от и до», срок, процентный коридор.
 
----
-
-## Файловая структура
+Не используй когда:
 
-```text
-src/components/SliderRange/
-├── SliderRange.tsx      # class component, склейка SliderExtended + два Dot + Track
-├── index.ts             # Barrel
-└── __tests__/
-```
+- Нужен один ползунок — возьми `Slider`.
+- Нужен нестандартный состав частей (без меток, без трека, своё содержимое ползунка) или
+  собственная разметка подсказки — собери слайдер из `SliderExtended`.
+- Нужно ввести точные границы — слайдер не заменяет пару `NumberField` / `AmountField`; при
+  крупных диапазонах их обычно ставят рядом со слайдером.
+- Ползункам нужны текстовые подписи для скринридера — `SliderRange` их передать не
+  позволяет (см. Accessibility), собирай из `SliderExtended`.
 
 ---
 
 ## Варианты и props
 
-### `ISliderRangeProps`
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `min` | `number` | Минимальное значение диапазона |
+| `max` | `number` | Максимальное значение диапазона |
+| `size` | `EComponentSize.MD \| EComponentSize.LG` | Размер. `SM` не поддерживается |
+| `values` | `TSliderRangeValues` (`[number, number]`) | Текущая пара значений |
+| `onChange` | `(values: TSliderRangeValues) => void` | Вызывается с отсортированной парой значений |
+| `marks` | `ISliderRangeMark[]` | Метки под полосой: `{ value: number; label: React.ReactNode }` |
 
-Extends `Omit<ISliderExtendedProps, "onChange" | "step">`.
+### Опциональные props
 
-| Prop | Тип | Default | Описание |
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `values` | `TSliderRangeValues` (`[number, number]`) | — | Значения обоих ползунков. Оба ∈ `[min, max]`. |
-| `onChange` | `(values: [number, number]) => void` | — | Вызывается с **отсортированным** массивом: `[меньший, больший]`. |
-| `marks` | `ISliderRangeMark[]` | — | Метки `{value, label}` под rail. Обязателен, может быть `[]`. |
-| `step?` | `number \| number[]` | `1` | Шаг или массив возможных значений (первый = `min`, последний = `max`). |
-| `draggableTrack?` | `boolean` | `true` | Track можно перетаскивать (двигает оба Dot одновременно). |
-| `renderTooltipContent?` | `(value: number) => ReactNode` | — | Если передан — Tooltip рендерится над **каждым** Dot. |
-| `size` | `EComponentSize.MD \| LG` | — (из ISliderExtendedProps) | Только MD и LG. |
-| `min` / `max` | `number` | — | От SliderExtended. |
-| `disabled?` / `reverse?` | `boolean` | — | От SliderExtended. |
-| `children` | `never` | — | Запрещено. |
-
-### `TSliderRangeValues`
-
-```ts
-type TSliderRangeValues = [number, number];
-```
+| `step` | `number \| number[]` | `1` | Длина шага либо массив значений шагов. В массиве первое значение равно `min`, последнее — `max` |
+| `draggableTrack` | `boolean` | `true` | Трек между ползунками перетаскивается целиком и сдвигает оба ползунка |
+| `reverse` | `boolean` | `false` | Значения возрастают справа налево |
+| `disabled` | `boolean` | `false` | Слайдер не активен: части не реагируют на курсор и выпадают из табуляции |
+| `renderTooltipContent` | `(value: number) => React.ReactNode` | — | Содержимое подсказки над ползунком; вызывается для каждого ползунка со своим значением. Без этого prop подсказки не рендерятся вовсе |
+
+Остальные атрибуты `React.HTMLAttributes<HTMLDivElement>` (включая `className`, `id`,
+`aria-*`, `data-*`) уходят на **корневой `div`** слайдера. `children` запрещён
+(`children?: never`): разметку собирает сам компонент.
+
+### Особенности поведения
+
+- **Компонент двигает ползунки сам.** Он рисует их по внутренним значениям и сообщает новую
+  пару через `onChange`. `values` задаёт значения при монтировании и перезаписывает их, когда
+  потребитель присылает новую пару. Поэтому ползунки сдвинутся, даже если потребитель
+  проигнорирует `onChange`, — но тогда показанный диапазон разойдётся с его `values`.
+  Обновляй `values` в `onChange`, иначе состояние на экране и в потребителе рассинхронизируются.
+- **Наружу пара всегда уходит отсортированной.** Если ползунки поменялись местами,
+  `onChange` получает `[меньшее, большее]`, а внутри компонент помнит, какой ползунок
+  какой (см. «Инварианты» про `innerValues`).
+- **Неотсортированные `values` компонент исправляет сам.** Если `values[0] > values[1]`,
+  при монтировании и на каждом обновлении вызывается `onChange` с отсортированной парой.
+  Потребитель, который проигнорирует этот вызов и продолжит присылать перевёрнутую пару,
+  получит его снова на следующем обновлении; потребитель, который в ответ на него запишет
+  в state новую перевёрнутую пару, зациклит обновления.
+- **Перемещение трека меняет оба ползунка и вызывает `onChange` дважды подряд** — по
+  вызову на ползунок. Первый вызов приходит с промежуточной парой, второй — с итоговой.
+  Это же верно для стрелок на сфокусированном треке.
+- **`step` числом строит шаги как `[...range(min, max, step), max]`.** Последний шаг всегда
+  равен `max`, даже если он не кратен шагу: при `min: 0, max: 10, step: 3` шаги равны
+  `0, 3, 6, 9, 10`.
+- **`step` массивом задаёт произвольную шкалу.** Шаги равны визуально, а не по значению —
+  так делается шкала сумм с укрупняющимся шагом (см. story `Amounts`). Массив, собранный
+  инлайн в JSX, пересчитывает шаги на каждом рендере потребителя; вынеси его в константу.
+- **Ползунки могут стоять в одной точке**, на один шаг они не «раздвигаются»: минимальной
+  ширины диапазона у компонента нет.
+- **Клик по полосе и по метке двигает ближайший ползунок** на ближайший шаг / на значение
+  метки.
+- **`marks` не обязаны совпадать с шагами.** Метка со значением вне `[min, max]`
+  прижимается к краю полосы; `value` метки используется как React-ключ, поэтому дубли
+  значений дадут предупреждение о неуникальных ключах.
+- **Подсказки видны только при `:hover` и `:focus` ползунка** — управляются стилями, не
+  props. Постоянно видимой подсказки нет, поэтому текущий диапазон обычно дублируют рядом
+  со слайдером (так сделано в большинстве stories).
+- **Ширину и внешние отступы задаёт потребитель.** Своей ширины у слайдера нет; собственные
+  вертикальные отступы (под ползунки и под метки) он добавляет сам.
+
+---
 
-Публичный контракт: в `onChange` всегда приходит **отсортированный** массив
-`[min, max]`. Внутри (во время drag) значения могут «переставляться» — это
-состояние `innerValues` и наружу не видно.
+## Дизайн-токены
 
-### `ISliderRangeMark`
+Собственных токенов у компонента нет: своих стилей `SliderRange` не имеет и целиком состоит
+из `SliderExtended`. Внешний вид настраивается токенами группы `Slider` — их список и
+порядок переопределения см. в `SliderExtended-ai.md` → «Дизайн-токены». Значения по
+умолчанию — `src/components/DesignTokens/components/Slider.ts`.
 
-```ts
-{ value: number; label: ReactNode }
-```
+---
+
+## Инварианты
 
-`value` ∈ `[min, max]`.
+- **`SliderRange` — class-компонент, и это часть публичного API.** `ref` на нём даёт
+  инстанс класса, а не корневой `div` (в отличие от `Slider`, который обёрнут в
+  `React.forwardRef`). Перевод в функциональный компонент или оборачивание в `forwardRef`
+  сменит ref-target и тип компонента — breaking change.
+- **Внутреннее состояние `innerValues` хранит значения в порядке ползунков, а не по
+  возрастанию.** Так левый ползунок остаётся левым после того, как его перетащили за
+  правый: наружу пара уходит отсортированной, а внутри порядок сохраняется. Синхронизация с
+  `values` в `componentDidUpdate` учитывает это — когда ползунки перекрещены, новые `values`
+  присваиваются в обратном порядке. Замена `innerValues` на отсортированный массив заставит
+  ползунки перепрыгивать во время перетаскивания.
+- **`onChange` вызывается внутри updater'а `setState` намеренно.** Перемещение трека меняет
+  оба ползунка двумя вызовами подряд в одном батче, и второй обязан видеть значение,
+  записанное первым, — иначе трек сдвинет только один ползунок. Побочный эффект: в
+  `StrictMode` двойной вызов updater'а приводит к двойному вызову `onChange` с теми же
+  значениями.
+- **Пары значений сравниваются по склейке (`values.join("")`).** Из-за этого пары вроде
+  `[1, 23]` и `[12, 3]` считаются одинаковыми, и переход между ними не обновит ползунки.
+  Поведение историческое; чинить его нужно осознанно и вместе с release notes, потому что
+  оно наблюдаемо.
+- **`step` по умолчанию задан через `defaultProps`** (`1`). Значение по умолчанию —
+  часть публичного контракта.
+- **`children?: never`** — состав слайдера фиксирован, расширяется он только через
+  `SliderExtended`.
+- **`ISliderRangeProps` наследуется от `ISliderExtendedProps`**
+  (`Omit<..., "onChange" | "step">`). Переименование props в `SliderExtended` ломает
+  публичный API `SliderRange` — менять только вместе.
+- **Порядок частей в разметке (`Rail` → `Dot` → `Track` → `Dot` → `Marks`) и наличие `Rail`
+  обязательны.** Позиции клика и перетаскивания считаются от DOM-узла полосы; без `Rail`
+  работает только клавиатура. `Tooltip` обязан лежать внутри `Dot`.
+- **`renderTooltipContent` вызывается на каждом рендере** для каждого ползунка — держи её
+  дешёвой и без side effects.
+- Реализация остаётся React 17-совместимой (без `useId`, `useSyncExternalStore` и прочих
+  React 18-only API): код синхронизируется в `release-0`.
 
 ---
 
-## Ключевые особенности реализации
+## Accessibility
 
-### Class component
+- **Каждый ползунок — `role="slider"`** с `aria-valuemin`, `aria-valuenow`, `aria-valuemax`
+  из `min` / значения ползунка / `max` (рендерится `SliderExtended.Dot`).
+- **Подписи ползункам `SliderRange` передать нельзя.** Все лишние props уходят на корневой
+  `div`, а не на ползунки, поэтому `aria-label` / `aria-labelledby` окажутся на контейнере
+  без роли. Если подписи «от» и «до» или `aria-valuetext` (нелинейная шкала, суммы, единицы
+  измерения) обязательны — собирай слайдер из `SliderExtended` и передавай атрибуты прямо в
+  `SliderExtended.Dot`.
+- **Трек — `role="button"`**, потому что его можно перетаскивать клавиатурой. При
+  `draggableTrack={false}` он выпадает из табуляции.
+- **Клавиатура:** `ArrowLeft` / `ArrowDown` — шаг назад, `ArrowRight` / `ArrowUp` — шаг
+  вперёд; на треке — шаг обоими ползунками сразу. Обработчики вызывают `preventDefault`,
+  чтобы страница не скроллилась. `Home` / `End` / `PageUp` / `PageDown` не поддерживаются.
+- **Порядок табуляции динамический.** Пока слайдер не в фокусе, в табуляцию попадает только
+  ползунок с меньшим значением (`tabIndex` 0), второй исключён (`-1`). Как только фокус
+  попал внутрь, элементы получают `tabIndex` 1 (левый ползунок), 2 (трек), 3 (правый
+  ползунок). Побочный эффект положительных `tabIndex` — эти элементы встают в начало общего
+  порядка табуляции страницы, пока слайдер в фокусе.
+- **Метки кликабельны, но не фокусируются** и не читаются как элементы управления: это
+  ускоритель для мыши, дублирующий клавиатурное перемещение по шагам.
+- **Подсказки не связаны с ползунками через `aria`** — они показываются по `:hover`/`:focus`
+  и для скринридера бесполезны; значения доступны через `aria-valuenow`.
+- **`disabled` только визуальный и мышиный.** Части получают `pointer-events: none` и
+  `tabIndex -1`, но нативного `disabled` у `span` нет: программно установленный фокус
+  оставляет клавиатурное перемещение работающим — стрелки двигают ползунки и вызывают
+  `onChange` так же, как у активного слайдера.
 
-В отличие от `Slider` (FC) и `SliderExtended` (FC), `SliderRange` — **`React.Component`**.
-Причина: хранение `innerValues` и логика `validateValues` / `componentDidUpdate`
-со сравнением предыдущих props по `values.join("")`.
+---
 
-### `innerValues` — внутреннее состояние
+## Связанные компоненты
 
-- При drag левый Dot может «перепрыгнуть» правый → во внутреннем состоянии
-  `innerValues[0] > innerValues[1]`, но в `onChange` наружу летит уже отсортированный массив.
-- При получении новых `values` извне логика восстанавливает соответствие
-  (см. `componentDidUpdate`): если Dot'ы «поменялись», innerValues сохраняются
-  в правильном порядке для их Dot-экземпляров.
+- `SliderExtended` (`src/components/SliderExtended/`) — составной слайдер, из которого
+  собран `SliderRange`, и источник его props. Нужен, когда состава `SliderRange` не
+  хватает: свой набор частей, своя подсказка, `aria`-атрибуты на ползунках.
+- `Slider` (`src/components/Slider/`) — тот же слайдер на один ползунок: принимает `value`
+  числом и не следит за порядком значений.
 
-### `validateValues`
+---
 
-Если `values[0] > values[1]` — компонент **автоматически** зовёт `onChange`
-с отсортированным массивом. Конструктор и `componentDidUpdate` вызывают
-валидацию на каждом rerender.
+## Stories
 
-### Жёсткая структура
+Основные истории: `stories/Slider/SliderRange.stories.tsx`
+Файлы примеров: `stories/Slider/examples/SliderRange/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный подбор `min`, `max`, `step`, `marks`, `size`, `draggableTrack`, `disabled`, `reverse` |
+| `Default` | `Default.tsx` | Диапазон с метками и шагом по умолчанию |
+| `Sizes` | `Sizes.tsx` | Размеры MD и LG |
+| `WithTooltip` | `WithTooltip.tsx` | Подсказки над обоими ползунками через `renderTooltipContent` |
+| `WithCustomSteps` | `WithCustomSteps.tsx` | Шаги заданы массивом значений |
+| `NonDraggableTrack` | `NonDraggableTrack.tsx` | `draggableTrack={false}` — трек не перетаскивается |
+| `Disabled` | `Disabled.tsx` | Неактивный слайдер |
+| `Reverse` | `Reverse.tsx` | Значения возрастают справа налево |
+| `Amounts` | `Amounts.tsx` | Production-like шкала сумм с неравномерным шагом: слайдер работает с индексами шкалы |
+| `VisualTests` | `VisualTests.tsx` | Размеры, шаги массивом, ползунки в одной точке, реверс и неактивное состояние; `play` ставит фокус на левый ползунок, чтобы в кадр попали обводка фокуса и подсказка |
+
+`Playground` исключён из скриншот-тестов. `WithTooltip` исключён, потому что подсказки
+скрыты, пока ползунок не в фокусе (состояние с подсказкой снимает `VisualTests`), а
+`NonDraggableTrack` — потому что `draggableTrack` в статике неотличим от `Default`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-09-15 | Создан документ. AI-рефакторинг (TRI-79): props задокументированы JSDoc, сортировка и сравнение значений вынесены в чистые функции модуля, синхронизация `values` → `innerValues` упрощена, из разметки убран избыточный проброс `size` (значение приходит тем же spread'ом). Публичный API props, интерфейсов и barrel-экспортов не изменён, компонент остался классом. Добавлены unit-тесты, stories переведены на modern pattern. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Slider/examples/SliderRange/Default.tsx`
 
 ```tsx
-<SliderExtended step={step} size={size} {...rest}>
-    <SliderExtended.Rail />
-    <SliderExtended.Dot key="1" value={innerValues[0]} onChange={...}>
-        {renderTooltipContent && <SliderExtended.Tooltip value={innerValues[0]}>...</SliderExtended.Tooltip>}
-    </SliderExtended.Dot>
-    <SliderExtended.Track draggable={draggableTrack} />
-    <SliderExtended.Dot key="2" value={innerValues[1]} onChange={...}>
-        {renderTooltipContent && <SliderExtended.Tooltip value={innerValues[1]}>...</SliderExtended.Tooltip>}
-    </SliderExtended.Dot>
-    <SliderExtended.Marks>
-        {marks.map(m => <SliderExtended.Mark key={m.value} value={m.value}>{m.label}</SliderExtended.Mark>)}
-    </SliderExtended.Marks>
-</SliderExtended>
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 30, label: "30" },
+    { value: 70, label: "70" },
+    { value: 100, label: "100" },
+];
+
+export const Default = () => {
+    const [values, setValues] = useState<TSliderRangeValues>([30, 70]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>values = [{values.join(", ")}]</div>
+            <br />
+            <SliderRange
+                min={0}
+                max={100}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={values}
+                onChange={setValues}
+            />
+        </div>
+    );
+};
 ```
 
----
+### Sizes
 
-## Инварианты
+`stories/Slider/examples/SliderRange/Sizes.tsx`
 
-- **Два Dot, жёсткая структура** — менять только через SliderExtended.
-- **`onChange` получает отсортированный `[a, b]`** — публичный контракт.
-- **`marks: ISliderRangeMark[]`** — обязателен (может быть `[]`).
-- **`step` default `1`**.
-- **`size: MD | LG`** — `SM` не поддерживается.
-- **`children: never`**.
-- **`values`: оба ∈ `[min, max]`** — потребитель отвечает.
-- **Если `step` — массив**, первое = `min`, последнее = `max`.
-- **`SliderRange` — class component** (не FC, не forwardRef). Ref не пробрасывается.
-- **`renderTooltipContent`** вызывается ДВАЖДЫ за рендер (по разу на Dot) — функция должна быть чистой.
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 50, label: "50" },
+    { value: 100, label: "100" },
+];
+
+interface ISizeItemProps {
+    size: EComponentSize.MD | EComponentSize.LG;
+}
+
+const SIZES: ISizeItemProps["size"][] = [EComponentSize.MD, EComponentSize.LG];
+
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const [values, setValues] = useState<TSliderRangeValues>([30, 70]);
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+            <SliderRange min={0} max={100} size={size} marks={MARKS} values={values} onChange={setValues} />
+        </div>
+    );
+};
+
+export const Sizes = () => (
+    <div style={{ maxWidth: "750px", padding: "30px", display: "flex", flexDirection: "column", gap: "24px" }}>
+        {SIZES.map((size) => (
+            <SizeItem key={size} size={size} />
+        ))}
+    </div>
+);
+```
 
----
+### WithTooltip
 
-## Accessibility
+`stories/Slider/examples/SliderRange/WithTooltip.tsx`
 
-- Наследуется от `SliderExtended.Dot` — оба Dot имеют `role="slider"`,
-  `aria-valuemin/now/max`.
-- `Track` (между Dot'ами) — `role="button"`, `tabIndex={2}` когда слайдер в фокусе:
-  можно двигать весь диапазон с клавиатуры.
-- Keyboard: `ArrowLeft/Right/Up/Down` на focused Dot перемещают его на step;
-  на focused Track — двигают оба Dot'а.
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 35, label: "35" },
+    { value: 66, label: "66" },
+    { value: 100, label: "100" },
+];
+
+export const WithTooltip = () => {
+    const [values, setValues] = useState<TSliderRangeValues>([35, 66]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>values = [{values.join(", ")}]</div>
+            <br />
+            <SliderRange
+                min={0}
+                max={100}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={values}
+                onChange={setValues}
+                renderTooltipContent={(value) => `${value} %`}
+            />
+        </div>
+    );
+};
+```
 
----
+### WithCustomSteps
 
-## Связанные компоненты
+`stories/Slider/examples/SliderRange/WithCustomSteps.tsx`
 
-- `Slider` — один Dot.
-- `SliderExtended` — низкоуровневая основа.
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+// Массив шагов вынесен из JSX: инлайновый массив пересчитывает шаги на каждом рендере.
+const STEPS = [0, 25, 50, 75, 100];
+
+const MARKS = STEPS.map((step) => ({ value: step, label: String(step) }));
+
+export const WithCustomSteps = () => {
+    const [values, setValues] = useState<TSliderRangeValues>([25, 75]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>values = [{values.join(", ")}]</div>
+            <br />
+            <SliderRange
+                min={0}
+                max={100}
+                step={STEPS}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={values}
+                onChange={setValues}
+            />
+        </div>
+    );
+};
+```
 
----
+### NonDraggableTrack
 
-## Stories
+`stories/Slider/examples/SliderRange/NonDraggableTrack.tsx`
 
-`stories/Slider/SliderRange.stories.tsx`
-Примеры: `stories/Slider/examples/SliderRange/`
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 35, label: "35" },
+    { value: 66, label: "66" },
+    { value: 100, label: "100" },
+];
+
+export const NonDraggableTrack = () => {
+    const [values, setValues] = useState<TSliderRangeValues>([35, 66]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>values = [{values.join(", ")}]</div>
+            <br />
+            <SliderRange
+                min={0}
+                max={100}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={values}
+                onChange={setValues}
+                draggableTrack={false}
+            />
+        </div>
+    );
+};
+```
 
----
+### Disabled
 
-## История изменений
+`stories/Slider/examples/SliderRange/Disabled.tsx`
+
+```tsx
+import React from "react";
+import { EComponentSize, SliderRange } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 35, label: "35" },
+    { value: 66, label: "66" },
+    { value: 100, label: "100" },
+];
+
+export const Disabled = () => (
+    <div style={{ maxWidth: "750px", padding: "30px" }}>
+        <SliderRange
+            min={0}
+            max={100}
+            size={EComponentSize.MD}
+            marks={MARKS}
+            values={[35, 66]}
+            onChange={() => {}}
+            disabled
+        />
+    </div>
+);
+```
+
+### Reverse
+
+`stories/Slider/examples/SliderRange/Reverse.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+const MARKS = [
+    { value: 0, label: "0" },
+    { value: 35, label: "35" },
+    { value: 66, label: "66" },
+    { value: 100, label: "100" },
+];
+
+export const Reverse = () => {
+    const [values, setValues] = useState<TSliderRangeValues>([35, 66]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>values = [{values.join(", ")}]</div>
+            <br />
+            <SliderRange
+                min={0}
+                max={100}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={values}
+                onChange={setValues}
+                reverse
+            />
+        </div>
+    );
+};
+```
+
+### Amounts
+
+`stories/Slider/examples/SliderRange/Amounts.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EComponentSize, SliderRange, TSliderRangeValues } from "@sberbusiness/triplex-next";
+
+/** Возвращает значения от from до to (не включая), с шагом step. */
+const range = (from: number, to: number, step: number): number[] => {
+    const values: number[] = [];
+
+    for (let value = from; value < to; value += step) {
+        values.push(value);
+    }
+
+    return values;
+};
+
+/**
+ * Шкала сумм с неравномерным шагом: чем больше сумма, тем крупнее шаг.
+ * Слайдер работает с индексами шкалы, поэтому шаги равны визуально.
+ */
+const AMOUNTS = [
+    0,
+    10000,
+    ...range(20000, 240000, 20000),
+    ...range(240000, 1000000, 40000),
+    ...range(1000000, 2150000, 50000),
+    ...range(2150000, 2600000, 75000),
+    ...range(2600000, 3000000, 100000),
+    ...range(3000000, 3800000, 200000),
+    ...range(3800000, 9000000, 400000),
+    ...range(9000000, 10000000, 500000),
+    ...range(10000000, 25000000, 2500000),
+    ...range(25000000, 40000000, 5000000),
+    ...range(40000000, 90000001, 10000000),
+    100000000,
+];
+
+const amountFormat = new Intl.NumberFormat("ru-RU");
+
+const MARKS = [
+    { value: 0, label: "0 млн" },
+    { value: AMOUNTS.indexOf(1000000), label: "1 млн" },
+    { value: AMOUNTS.indexOf(3000000), label: "3 млн" },
+    { value: AMOUNTS.length - 1, label: "100 млн" },
+];
+
+export const Amounts = () => {
+    const [amountIndexes, setAmountIndexes] = useState<TSliderRangeValues>([
+        AMOUNTS.indexOf(1000000),
+        AMOUNTS.indexOf(3000000),
+    ]);
+
+    return (
+        <div style={{ maxWidth: "750px", padding: "30px" }}>
+            <div>
+                от {amountFormat.format(AMOUNTS[amountIndexes[0]])} до {amountFormat.format(AMOUNTS[amountIndexes[1]])}
+            </div>
+            <br />
+            <SliderRange
+                min={0}
+                max={AMOUNTS.length - 1}
+                size={EComponentSize.MD}
+                marks={MARKS}
+                values={amountIndexes}
+                onChange={setAmountIndexes}
+                renderTooltipContent={(value) => amountFormat.format(AMOUNTS[value])}
+            />
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |