SW-3632 Slider Component (#382)

Author: charlie-tf

src/components/Slider/index.tsx

@@ -0,0 +1,66 @@
+import { Slider as MuiSlider, useTheme } from '@mui/material';
+import React, { useState } from 'react';
+
+export type SliderMark = {
+  label?: string;
+  value: number;
+};
+
+export type SliderProps = {
+  defaultValue?: number;
+  marks?: SliderMark[];
+  min?: number;
+  max?: number;
+  onChange: (value: number) => void;
+  step?: number;
+  valueLabelDisplay?: 'auto' | 'on' | 'off';
+};
+
+export default function Slider(props: SliderProps): JSX.Element {
+  const { defaultValue, marks, min, max, onChange, step, valueLabelDisplay } = props;
+  const theme = useTheme();
+
+  const sliderStyles = {
+    '.MuiSlider-rail': {
+      backgroundColor: theme.palette.TwClrBgBrandTertiary,
+      height: theme.spacing(0.5),
+    },
+    '.MuiSlider-track': {
+      display: 'none',
+    },
+    '.MuiSlider-mark': {
+      backgroundColor: theme.palette.TwClrBgBrand,
+      height: '8px',
+      width: '8px',
+      borderRadius: '4px',
+    },
+    '.MuiSlider-thumb': {
+      backgroundColor: theme.palette.TwClrBgBrand,
+      height: '16px',
+      width: '16px',
+      borderRadius: '8px',
+    },
+  };
+
+  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const handleChange = (event: React.SyntheticEvent | Event, value: number | number[]) => {
+    if (!Array.isArray(value)) {
+      if (value !== currentValue) {
+        setCurrentValue(value);
+        onChange(value);
+      }
+    }
+  };
+
+  return <MuiSlider
+    aria-label='Small steps'
+    defaultValue={defaultValue}
+    marks={marks}
+    min={min}
+    max={max}
+    onChangeCommitted={handleChange}
+    step={step ?? null}
+    valueLabelDisplay={valueLabelDisplay}
+    sx={sliderStyles}
+  />;
+}

src/index.ts

@@ -32,6 +32,7 @@ import ProgressCircle from './components/ProgressCircle/ProgressCircle';
 import RadioButton from './components/RadioButton';
 import Select from './components/Select/Select';
 import SelectT from './components/Select/SelectT';
+import Slider from './components/Slider';
 import SummaryBox from './components/SummaryBox';
 import Textfield from './components/Textfield/Textfield';
 import TextTruncated from './components/TextTruncated';
@@ -53,6 +54,7 @@ export type { EnhancedTableDetailsRow, RendererProps, TableColumnType, TableRowT
 export type { FormButton } from './components/FormBottomBar';
 export type { PhotoChooserErrorType, PhotoChooserProps } from './components/PhotoChooser';
 export type { PhotoItem } from './components/ViewPhotosDialog';
+export type { SliderMark } from './components/Slider';
 
 export {
   Autocomplete,
@@ -91,6 +93,7 @@ export {
   RadioButton,
   Select,
   SelectT,
+  Slider,
   stableSort,
   SummaryBox,
   Svg,

src/stories/Slider.stories.tsx

@@ -0,0 +1,56 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { Box } from '@mui/material';
+import Slider, { SliderProps } from '../components/Slider';
+
+export default {
+  title: 'Slider',
+  component: Slider,
+};
+
+const Template: Story<SliderProps> = (args) => {
+  return <Box height='100vh' display='flex' alignItems='center'>
+    <Slider {...args} />
+  </Box>;
+};
+
+export const Default = Template.bind({});
+
+export const SnapToMark = Template.bind({});
+
+const marks = [
+  {
+    label: '0%',
+    value: 0,
+  },
+  {
+    value: 25,
+  },
+  {
+    label: '50%',
+    value: 50,
+  },
+  {
+    value: 75,
+  },
+  {
+    label: '100%',
+    value: 100,
+  },
+];
+
+Default.args = {
+  defaultValue: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  marks,
+  valueLabelDisplay: 'auto',
+};
+
+SnapToMark.args = {
+  defaultValue: 50,
+  marks,
+  valueLabelDisplay: 'auto',
+  onChange: (value) => alert(`Power level at ${value}%`),
+};