feat: introduce slider component description

src/content/components/uikit/Slider/index.ts

@@ -0,0 +1,62 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Uikit, componentName: 'Slider'};
+
+export const sliderConfig = {
+    id: 'slider',
+    title: 'Slider',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() => import('../examples/components').then((mod) => mod.SliderExample)),
+        props: {
+            hasTooltip: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            validationState: {
+                type: 'radioButton',
+                values: mappingOptions(['normal', 'invalid']),
+                defaultValue: 'normal',
+            },
+            errorMessage: {
+                type: 'input',
+                defaultValue: 'Input is invalid',
+            },
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['s', 'm', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            min: {
+                type: 'input',
+                defaultValue: 0,
+            },
+            max: {
+                type: 'input',
+                defaultValue: 100,
+            },
+            step: {
+                type: 'input',
+                defaultValue: 1,
+            },
+            debounceDelay: {
+                type: 'input',
+                defaultValue: 0,
+            },
+            marksCount: {
+                type: 'input',
+                defaultValue: 2,
+            },
+        },
+    },
+};

src/content/components/uikit/examples/components/SliderExample.tsx

@@ -0,0 +1,48 @@
+import {Slider, SliderProps} from '@gravity-ui/uikit';
+import React from 'react';
+
+type SliderExampleProps = Omit<
+    SliderProps,
+    'max' | 'min' | 'marksCount' | 'step' | 'debounceDelay'
+> & {
+    max?: string | number;
+    min?: string | number;
+    marksCount?: string | number;
+    step?: string | number;
+    debounceDelay?: string | number;
+};
+
+export const SliderExample = ({
+    defaultValue,
+    max,
+    min,
+    marksCount,
+    step,
+    debounceDelay,
+    ...restProps
+}: SliderExampleProps) => {
+    const [value, setValue] = React.useState(defaultValue);
+    const maxValue = Number(max) || undefined;
+    const minValue = Number(min) || undefined;
+    const marksCountValue = Number(marksCount) || undefined;
+    const stepValue = Number(step) || undefined;
+    const debounceDelayValue = Number(debounceDelay) || undefined;
+
+    return (
+        <div style={{width: '100%', maxWidth: 300}}>
+            <Slider
+                {...restProps}
+                onUpdate={setValue}
+                min={minValue}
+                max={maxValue}
+                marksCount={marksCountValue}
+                step={stepValue}
+                debounceDelay={debounceDelayValue}
+                defaultValue={defaultValue}
+            />
+            <div style={{textAlign: 'center'}}>{`Selected value: ${
+                value === undefined ? '' : value
+            }`}</div>
+        </div>
+    );
+};

src/content/components/uikit/examples/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ArrowToggleExample';
 export * from './PopupAnchorExample';
 export * from './PopupPlacementExample';
+export * from './SliderExample';

src/content/components/uikit/index.ts

@@ -29,6 +29,7 @@ import {radioGroupConfig} from './RadioGroup';
 import {selectConfig} from './Select';
 import {sheetConfig} from './Sheet';
 import {skeletonConfig} from './Skeleton';
+import {sliderConfig} from './Slider';
 import {spinConfig} from './Spin';
 import {switchConfig} from './Switch';
 import {tableConfig} from './Table';
@@ -69,6 +70,7 @@ const uikitComponents: Component[] = [
     radioGroupConfig,
     selectConfig,
     skeletonConfig,
+    sliderConfig,
     spinConfig,
     switchConfig,
     tableConfig,