Add slider component

src/renderer/components/index.ts

@@ -15,3 +15,4 @@ export * from './date-picker';
 export * from './scroll-area';
 export * from './paper';
 export * from './tabs';
+export * from './slider';

src/renderer/components/slider/index.tsx

@@ -0,0 +1,30 @@
+import {
+  Slider as MantineSlider,
+  SliderProps as MantineSliderProps,
+} from '@mantine/core';
+import styled from 'styled-components';
+
+type SliderProps = MantineSliderProps;
+
+const StyledSlider = styled(MantineSlider)`
+  & .mantine-Slider-track {
+    height: 0.5rem;
+    background-color: var(--slider-track-bg);
+  }
+
+  & .mantine-Slider-thumb {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  & .mantine-Slider-label {
+    padding: 0 1rem;
+    color: var(--tooltip-fg);
+    font-size: 1em;
+    background: var(--tooltip-bg);
+  }
+`;
+
+export const Slider = ({ ...props }: SliderProps) => {
+  return <StyledSlider {...props} />;
+};