Initial commit

web/app/components/base/slider/index.tsx

@@ -0,0 +1,24 @@
+import ReactSlider from 'react-slider'
+import './style.css'
+type ISliderProps = {
+  value: number
+  max?: number
+  min?: number
+  step?: number
+  onChange: (value: number) => void
+}
+
+const Slider: React.FC<ISliderProps> = ({ max, min, step, value, onChange }) => {
+  return <ReactSlider
+        value={value}
+        min={min || 0}
+        max={max || 100}
+        step={step || 1}
+        className="slider"
+        thumbClassName="slider-thumb"
+        trackClassName="slider-track"
+        onChange={onChange}
+    />
+}
+
+export default Slider

web/app/components/base/slider/style.css

@@ -0,0 +1,28 @@
+.slider {
+    position: relative;
+}
+
+.slider-thumb {
+    width: 18px;
+    height: 18px;
+    background-color: white;
+    border-radius: 50%;
+    position: absolute;
+    top: -9px;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+
+}
+
+.slider-thumb:focus {
+    outline: none;
+}
+
+.slider-track {
+    background-color: #9CA3AF;
+    height: 2px;
+}
+
+.slider-track-1 {
+    background-color: #E5E7EB;
+}