Implement custom Slider component

This inherits from Radix's Slider

components/Slider/index.scss

@@ -0,0 +1,42 @@
+.Slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: $unit-20x;
+  height: 20px;
+
+  .SliderTrack {
+    background-color: var(--button-bg);
+    position: relative;
+    flex-grow: 1;
+    border-radius: 9999px;
+    height: 3px;
+  }
+}
+
+.SliderRange {
+  position: absolute;
+  background-color: var(--accent-blue);
+  border-radius: 9999px;
+  height: 100%;
+}
+
+.SliderThumb {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  box-shadow: 0 2px 10px var(--button-bg);
+  border-radius: 10px;
+
+  &:hover {
+    background-color: darken(white, 10%);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 5px rgba($accent--blue--light, 0.6);
+  }
+}

components/Slider/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import type { SliderProps } from '@radix-ui/react-slider'
+import classNames from 'classnames'
+
+import './index.scss'
+
+interface Props {}
+
+const Slider = React.forwardRef<HTMLDivElement, Props & SliderProps>(
+  (props, forwardedRef) => {
+    const value = props.value || props.defaultValue
+
+    return (
+      <SliderPrimitive.Slider
+        {...props}
+        className={classNames({ Slider: true }, props.className)}
+        ref={forwardedRef}
+      >
+        <SliderPrimitive.Track className="SliderTrack">
+          <SliderPrimitive.Range className="SliderRange" />
+        </SliderPrimitive.Track>
+
+        <SliderPrimitive.Thumb className="SliderThumb" />
+      </SliderPrimitive.Slider>
+    )
+  }
+)
+
+export default Slider