Slider component

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "engines": {
     "node": "^18",
     "npm": "^9"

src/components/Slider.tsx

@@ -0,0 +1,10 @@
+import { Slider as MuiSlider } from "@mui/material";
+import { SliderProps as MuiSliderProps } from '@mui/material/Slider/Slider'
+
+export interface SliderProps extends MuiSliderProps {}
+
+const Slider = ({ ...props }: SliderProps) => {
+    return <MuiSlider {...props}  />
+}
+
+export default Slider;

src/index.ts

@@ -78,6 +78,7 @@ export { default as TableFooter } from '@mui/material/TableFooter';
 export { default as TableRow } from '@mui/material/TableRow';
 export { default as ToggleButtonGroup } from './components/ToggleButtonGroup';
 export type { ToggleButtonOption } from './components/ToggleButtonGroup';
+export { default as Slider } from './components/Slider';
 export { createFilterOptions } from '@mui/material/useAutocomplete';
 export { useTheme } from '@mui/system';
 export type { SxProps } from '@mui/material';

stories/Inputs/Slider.stories.tsx

@@ -0,0 +1,78 @@
+import { StoryFn, Meta } from '@storybook/react';
+import { Box } from '../../src';
+import Slider, {  SliderProps } from '../../src/components/Slider'
+
+const meta: Meta<typeof Slider>  = {
+  title: 'Components/Inputs/Slider',
+  component: Slider,
+  argTypes: {
+    min: {
+        control: { type: 'number'}, 
+        table: { defaultValue: { summary: 0 } },
+        description: 'Minimal value that can be set', 
+    },
+    max: {
+        control: { type: 'number'}, 
+        table: { defaultValue: { summary: 100 } },
+        description: 'Maximum value that can be set', 
+    },
+    step: {
+        control: { type: 'number'}, 
+        table: { defaultValue: { summary: 1 } },
+        description: 'Each step value the slider will take', 
+    },
+    valueLabelDisplay: {
+        control: { options: ['on', 'auto', 'off'] }, 
+        table: { defaultValue: { summary: 'off' } },
+        description: 'Controls labels visibility', 
+    },
+    marks: { 
+        control: { type: 'object'}, 
+        table: { defaultValue: { summary: false } },
+        description: 'Marks to display on the slider. {value: number, label: string}[] or boolean', 
+     },
+  },
+};
+
+const Template: StoryFn<SliderProps> = (args) => (
+    <Box sx={{ width: 300 }}>
+        <Slider {...args} />
+    </Box>);
+
+export const Default = Template.bind({});
+Default.args = {
+    min: 0,
+    max: 100,
+    step: 1,
+    valueLabelDisplay: 'off',
+    marks: [],
+};
+
+export const Percentage = Template.bind({});
+Percentage.args = {
+    min: 0,
+    max: 100,
+    step: 1,
+    valueLabelDisplay: 'auto',
+    marks: [{ value: 0, label: '0%' }, { value: 100, label: '100%'}]
+};
+
+export const VisibleValue = Template.bind({});
+VisibleValue.args = {
+    min: 0,
+    max: 100,
+    step: 1,
+    marks: [],
+    valueLabelDisplay: 'on',
+};
+
+export const Range = Template.bind({});
+Range.args = {
+    min: 0,
+    max: 100,
+    step: 1,
+    marks: [],
+    value: [20, 60],
+};
+
+export default meta;