From 3cdd08fe89b9b2f21f79effeda583229792cdc7d Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 8 Nov 2022 01:36:08 -0800
Subject: [PATCH] Add slider component

---
 src/renderer/components/index.ts         |  1 +
 src/renderer/components/slider/index.tsx | 30 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/renderer/components/slider/index.tsx

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index 7f845a68e..33a4e0f5c 100644
--- a/src/renderer/components/index.ts
+++ b/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';
diff --git a/src/renderer/components/slider/index.tsx b/src/renderer/components/slider/index.tsx
new file mode 100644
index 000000000..3397423b4
--- /dev/null
+++ b/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} />;
+};