Slider and Range slider component

package.json

@@ -112,6 +112,7 @@
     "react-player": "^2.16.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.9.0",
+    "react-slider": "^2.0.6",
     "react-spinners": "0.8.3",
     "react-switch": "^7.0.0",
     "react-toastify": "9.1.3",
@@ -138,6 +139,7 @@
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/react-infinite-scroller": "^1",
+    "@types/react-slider": "^1.3.6",
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

src/blocks/index.ts

@@ -22,6 +22,7 @@ export { TextArea, type TextAreaProps } from './textarea';
 export { TextInput } from './textInput';
 export { ToggleSwitch } from './toggleSwtich';
 export { FileUpload } from './fileUpload';
+export { Slider, type SliderProps } from './slider';
 export { Spinner, type SpinnerProps } from './spinner';
 
 export * from './Blocks.colors';

src/blocks/slider/Slider.tsx

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+
+import ReactSlider from 'react-slider';
+import { SliderProps } from './Slider.types';
+import { isArray } from 'lodash';
+
+const StyledSlider = styled(ReactSlider)<{ range?: boolean }>`
+  .horizontal-slider-track {
+    height: var(--spacing-xxxs);
+    background-color: var(--components-slider-background-default);
+    border-radius: var(--border-sm);
+  }
+
+  .horizontal-slider-thumb {
+    width: var(--spacing-sm);
+    height: var(--spacing-sm);
+    margin-top: -6px;
+    background-color: var(--components-slider-icon-default);
+    border: var(--border-sm) solid var(--components-slider-stroke-default);
+    border-radius: 50%;
+    cursor: pointer;
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  ${({ range }) =>
+    range
+      ? css`
+          .horizontal-slider-track-1 {
+            background-color: var(--components-slider-background-progress);
+          }
+        `
+      : css`
+          .horizontal-slider-track-0 {
+            background-color: var(--components-slider-background-progress);
+          }
+        `}
+`;
+
+const Slider = <T extends number | [number, number]>({
+  min,
+  max,
+  onChange,
+  value,
+  step,
+  defaultValue,
+}: SliderProps<T>) => {
+  return (
+    <StyledSlider
+      {...{ min, max, value, step, defaultValue }}
+      className="horizontal-slider"
+      thumbClassName="horizontal-slider-thumb"
+      trackClassName="horizontal-slider-track"
+      ariaLabel={isArray(value) ? ['Lower thumb', 'Upper thumb'] : 'Thumb'}
+      ariaValuetext={(state) => `Thumb value ${state.valueNow}`}
+      onChange={(value) => onChange(value as T)}
+      value={value}
+      range={isArray(value)}
+    />
+  );
+};
+
+Slider.displayName = 'Slider';
+
+export { Slider };

src/blocks/slider/Slider.types.ts

@@ -0,0 +1,11 @@
+export type SliderBaseProps = {
+  min: number;
+  max: number;
+  step: number;
+};
+
+export type SliderProps<T> = SliderBaseProps & {
+  value?: T;
+  onChange: (value: T) => void;
+  defaultValue?: T;
+};

src/blocks/slider/index.ts

@@ -0,0 +1,2 @@
+export * from './Slider';
+export * from './Slider.types';

src/blocks/theme/colors/colors.semantics.ts

@@ -25,6 +25,7 @@ import { textSemantics } from '../semantics/semantics.text';
 import { textAreaSemantics } from '../semantics/semantics.textarea';
 import { toastSemantics } from '../semantics/semantics.toast';
 import { tooltipSemantics } from '../semantics/semantics.tooltip';
+import { sliderSemantics } from '../semantics/semantics.slider';
 import { spinnerSemantics } from '../semantics/semantics.spinner';
 import { tableSemantics } from '../semantics/semantics.table';
 
@@ -56,6 +57,7 @@ type SemanticKeys = {
   toast: 'components-toast';
   toggle: 'components-toggle-switch';
   tooltip: 'components-tooltip';
+  slider: 'components-slider';
   spinner: 'components-spinner';
 };
 
@@ -86,6 +88,7 @@ export const semanticKeys: SemanticKeys = {
   toast: 'components-toast',
   toggle: 'components-toggle-switch',
   tooltip: 'components-tooltip',
+  slider: 'components-slider',
   spinner: 'components-spinner',
 };
 
@@ -116,5 +119,6 @@ export const colorSemantics = {
   [semanticKeys.toast]: toastSemantics,
   [semanticKeys.toggle]: switchSemantics,
   [semanticKeys.tooltip]: tooltipSemantics,
+  [semanticKeys.slider]: sliderSemantics,
   [semanticKeys.spinner]: spinnerSemantics,
 };

src/blocks/theme/semantics/semantics.slider.ts

@@ -0,0 +1,10 @@
+import { colorPrimitives } from '../colors/colors.primitives';
+import { strokeSemantics } from './semantics.stroke';
+import { surfaceSemantics } from './semantics.surface';
+
+export const sliderSemantics = {
+  'stroke-default': { light: strokeSemantics.secondary.light, dark: strokeSemantics.secondary.dark },
+  'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] },
+  'background-default': { light: surfaceSemantics.secondary.light, dark: surfaceSemantics.secondary.dark },
+  'background-progress': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark },
+};

yarn.lock

@@ -6790,6 +6790,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-slider@npm:^1.3.6":
+  version: 1.3.6
+  resolution: "@types/react-slider@npm:1.3.6"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10/0d5e71941e9ffec683efc489f6db264e36021dc5f681c33cec26efa7edc74f7f964db68b6de0ff2145a9f33b7071c2a8d6b2fc3155feed68b0f031509768f2a3
+  languageName: node
+  linkType: hard
+
 "@types/react-transition-group@npm:^4.2.0, @types/react-transition-group@npm:^4.4.10":
   version: 4.4.11
   resolution: "@types/react-transition-group@npm:4.4.11"
@@ -18310,6 +18319,7 @@ __metadata:
     "@types/react": "npm:^18.2.66"
     "@types/react-dom": "npm:^18.2.22"
     "@types/react-infinite-scroller": "npm:^1"
+    "@types/react-slider": "npm:^1.3.6"
     "@types/styled-components": "npm:5.1.26"
     "@typescript-eslint/eslint-plugin": "npm:^7.2.0"
     "@typescript-eslint/parser": "npm:^7.2.0"
@@ -18379,6 +18389,7 @@ __metadata:
     react-player: "npm:^2.16.0"
     react-redux: "npm:^7.2.6"
     react-router-dom: "npm:^6.9.0"
+    react-slider: "npm:^2.0.6"
     react-spinners: "npm:0.8.3"
     react-switch: "npm:^7.0.0"
     react-toastify: "npm:9.1.3"
@@ -19105,6 +19116,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-slider@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "react-slider@npm:2.0.6"
+  dependencies:
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    react: ^16 || ^17 || ^18
+  checksum: 10/9ee7f9073207f559a37e10aa52cfebc3d54925d23906bc2902ba8cb55f3607d867c5b3d77614f46a48204de47a4adb11254b52f6ead458ab6b409e3d5be9144e
+  languageName: node
+  linkType: hard
+
 "react-spinners@npm:0.8.3":
   version: 0.8.3
   resolution: "react-spinners@npm:0.8.3"