feat(slider): add slider component

package.json

@@ -63,6 +63,7 @@
   "dependencies": {
     "@popperjs/core": "^2.4.4",
     "classnames": "^2.2.6",
+    "react-compound-slider": "^3.3.1",
     "react-feather": "^2.0.8",
     "react-popper": "^2.2.3",
     "react-portal": "^4.2.1",

src/components/Slider/Handle/Handle.module.css

@@ -0,0 +1,42 @@
+.container {
+  position: absolute;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  cursor: grab;
+  transform: translate(-50%, -50%);
+}
+
+.handle {
+  width: 4px;
+  height: 4px;
+  border: 8px solid var(--color-neutral-7);
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.dragging .handle,
+.container:hover .handle {
+  background-color: var(--color-neutral-7);
+}
+
+.container.disabled .handle {
+  border-color: var(--color-neutral-3);
+}
+
+.dragging .handle {
+  transform: scale(1.4);
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 38px;
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--color-neutral-3);
+}

src/components/Slider/Handle/Handle.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React, { ReactNode } from 'react';
+import { GetHandleProps, SliderItem } from 'react-compound-slider';
+import cn from 'classnames';
+
+import styles from './Handle.module.css';
+
+type Props = {
+  domain: number[];
+  handle: SliderItem;
+  isActive: boolean;
+  getHandleProps: GetHandleProps;
+  isDisabled?: boolean;
+  showTooltip: boolean;
+  formatValue?: (value: number) => ReactNode;
+};
+
+export const Handle: React.FC<Props> = ({
+  domain: [min, max],
+  handle: { id, value, percent },
+  isActive = false,
+  isDisabled = false,
+  showTooltip = true,
+  formatValue = (n) => String(n),
+  getHandleProps,
+}: Props) => {
+  const classNames = cn(styles.container, {
+    [styles.dragging]: isActive,
+    [styles.disabled]: isDisabled,
+  });
+
+  return (
+    <>
+      <div
+        className={classNames}
+        style={{
+          left: `${percent}%`,
+        }}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...getHandleProps(id)}
+      >
+        {showTooltip && isActive && <div className={styles.tooltip}>{formatValue(value)}</div>}
+        <div
+          role="slider"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          style={{
+            left: `${percent}%`,
+          }}
+          className={styles.handle}
+        />
+      </div>
+    </>
+  );
+};

src/components/Slider/Slider.mdx

@@ -0,0 +1,63 @@
+---
+name: Slider
+menu: Components
+route: /slider
+---
+
+import { Playground, Props } from 'docz';
+import { Slider } from '../../index.ts'
+
+# Slider
+
+A slider component lets the user pick a value between a minimum and maximum value.
+
+## Examples
+
+### Minimal slider
+
+<Playground>
+  {() => {
+    const [value, setValue] = React.useState(50);
+    return <Slider name='minimal-slider' valueBoundaries={[0,100]} value={value} onChange={setValue} />
+  }}
+</Playground>
+
+### Slider with decimal values
+
+<Playground>
+  {() => {
+    const [value, setValue] = React.useState(1);
+    return <Slider name='minimal-slider' valueBoundaries={[0,10]} value={value} onChange={setValue} numberOfDecimals={2} stepSize={0.05} />
+  }}
+</Playground>
+
+### Slider with text boundaries
+
+<Playground>
+  {() => {
+    const [value, setValue] = React.useState(5);
+    return <Slider name='minimal-slider' valueBoundaries={[0,10]} textBoundaries={['Not accurate at all', 'Very accurate']} value={value} stepSize={1} onChange={setValue} />
+  }}
+</Playground>
+
+### Slider without tooltip
+
+<Playground>
+  {() => {
+    const [value, setValue] = React.useState(50);
+    return <Slider name='minimal-slider' valueBoundaries={[0,100]} value={value} onChange={setValue} showTooltip={false} />
+  }}
+</Playground>
+
+### Disabled slider
+
+<Playground>
+  {() => {
+    const [value, setValue] = React.useState(50);
+    return <Slider name='minimal-slider' valueBoundaries={[0,100]} value={value} onChange={setValue} isDisabled />
+  }}
+</Playground>
+
+## API
+
+<Props of={Slider} />

src/components/Slider/Slider.module.css

@@ -0,0 +1,19 @@
+.sliderWrapper {
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  touch-action: none;
+}
+
+.slider {
+  position: relative;
+  width: 100%;
+  height: 10px;
+  margin-top: 5px;
+}
+
+.sliderWrapper.disabled {
+  background-color: var(--colorBaseNeutral300);
+}

src/components/Slider/Slider.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Handles, Rail, Slider as CompoundSlider, Ticks } from 'react-compound-slider';
+import classnames from 'classnames';
+
+import { Handle } from './Handle/Handle';
+import { SliderRail } from './SliderRail/SliderRail';
+import { Tick } from './Tick/Tick';
+
+import cssReset from '../../css-reset.module.css';
+import styles from './Slider.module.css';
+
+type Props = {
+  name: string;
+  value: number;
+  onChange: (value: number) => void;
+  valueBoundaries: [number, number];
+  textBoundaries?: [string, string];
+  stepSize?: number;
+  numberOfDecimals?: number;
+  isDisabled?: boolean;
+  showTooltip?: boolean;
+};
+
+const Slider: React.FC<Props> = ({
+  name,
+  value,
+  onChange,
+  valueBoundaries,
+  textBoundaries,
+  stepSize,
+  numberOfDecimals = 0,
+  isDisabled = false,
+  showTooltip = true,
+}: Props) => {
+  const formatValue = (val: number) =>
+    (Math.round(val * (10 ** numberOfDecimals || 1)) / (10 ** numberOfDecimals || 1)).toFixed(
+      numberOfDecimals,
+    );
+  const minValue = valueBoundaries[0];
+  const maxValue = valueBoundaries[1];
+  const classNames = classnames(cssReset.ventura, styles.sliderWrapper, {
+    [styles.disabled]: isDisabled,
+  });
+
+  return (
+    <div className={classNames}>
+      <CompoundSlider
+        step={stepSize ?? (maxValue - minValue) / 100}
+        domain={valueBoundaries}
+        reversed={minValue > maxValue}
+        className={styles.slider}
+        onChange={(values) => onChange(values[0])}
+        values={[value]}
+        data-testid={`slider-${name}`}
+        disabled={isDisabled}
+      >
+        <Rail>{({ getRailProps }) => <SliderRail getRailProps={getRailProps} />}</Rail>
+        <Handles>
+          {({ handles, activeHandleID, getHandleProps }) => (
+            <div className="slider-handles">
+              {handles.map((handle) => (
+                <Handle
+                  key={handle.id}
+                  handle={handle}
+                  domain={valueBoundaries}
+                  isActive={handle.id === activeHandleID}
+                  formatValue={formatValue}
+                  getHandleProps={getHandleProps}
+                  isDisabled={isDisabled}
+                  showTooltip={showTooltip}
+                />
+              ))}
+            </div>
+          )}
+        </Handles>
+        <Ticks count={2} values={valueBoundaries}>
+          {({ ticks }) => (
+            <div className="slider-ticks">
+              {ticks.map((tick, index) => (
+                <Tick
+                  key={tick.id}
+                  tick={tick}
+                  formatValue={formatValue}
+                  textValue={textBoundaries?.[index]}
+                />
+              ))}
+            </div>
+          )}
+        </Ticks>
+      </CompoundSlider>
+    </div>
+  );
+};
+
+export default Slider;

src/components/Slider/SliderRail/SliderRail.module.css

@@ -0,0 +1,16 @@
+.container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  pointer-events: none;
+  background-color: var(--color-neutral-3);
+  border-radius: 7px;
+  transform: translate(0, -50%);
+}

src/components/Slider/SliderRail/SliderRail.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { GetRailProps } from 'react-compound-slider';
+
+import styles from './SliderRail.module.css';
+
+type Props = {
+  getRailProps: GetRailProps;
+};
+
+export const SliderRail: React.FC<Props> = ({ getRailProps }: Props) => (
+  <>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <div className={styles.container} {...getRailProps()} />
+    <div className={styles.rail} />
+  </>
+);

src/components/Slider/Tick/Tick.module.css

@@ -0,0 +1,27 @@
+.tick {
+  position: absolute;
+  height: 40px;
+  width: 50%;
+  bottom: 0;
+  padding: 0 10px 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  bottom: -12px;
+}
+
+.alignRight {
+  text-align: right;
+  transform: translateX(-100%);
+  padding: 0 0 0 10px;
+}
+
+.text {
+  color: var(--color-neutral-6);
+  margin-bottom: 13px;
+  display: block;
+}
+
+.value {
+  display: block;
+}

src/components/Slider/Tick/Tick.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { SliderItem } from 'react-compound-slider';
+import classnames from 'classnames';
+
+import styles from './Tick.module.css';
+
+type Props = {
+  tick: SliderItem;
+  formatValue?: (value: number) => ReactNode;
+  textValue?: string;
+};
+
+export const Tick: React.FC<Props> = ({
+  tick,
+  formatValue = (n) => String(n),
+  textValue,
+}: Props) => {
+  const classNames = classnames(styles.tick, { [styles.alignRight]: tick.percent > 50 });
+
+  return (
+    <div
+      style={{
+        left: `${tick.percent}%`,
+      }}
+      className={classNames}
+    >
+      {Boolean(textValue) && <span className={styles.text}>{textValue}</span>}
+      <span className={styles.value}>{formatValue(tick.value)}</span>
+    </div>
+  );
+};

src/index.ts

@@ -6,6 +6,7 @@ export { default as FormField } from './components/FormField/FormField';
 export { default as Input } from './components/Input/Input';
 export { default as Modal } from './components/Modal/Modal';
 export { default as Radio } from './components/Radio/Radio';
+export { default as Slider } from './components/Slider/Slider';
 export { default as Table } from './components/Table/Table';
 export { default as TextArea } from './components/TextArea/TextArea';
 export { default as Popover } from './components/Popover/Popover';