add css to helper components

src/features/helpers/Helpers.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import styles from './Helpers.module.css';
 
 const Slider = (props) => {
     return (
         <input
+            className={styles.slider}
             type="range"
             min={props.min}
             max={props.max}
@@ -20,6 +22,7 @@ const SelectList = (props) => {
     ));
     return (
         <select
+            className={styles.dropdown}
             value={props.value}
             onChange={(e) => props.onChange(e.target.value)}>
             {options}

src/features/helpers/Helpers.module.css

@@ -0,0 +1,21 @@
+.slider {
+    -webkit-appearance: none;
+    appearance: none;
+    outline: none;
+    height: 5px;
+    background-color: lightgray;
+    border-radius: 10px;
+    position: relative;
+}
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: slategray;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    transition: background 0.15s ease-in-out;
+}
+.slider::-webkit-slider-thumb:hover {
+    background: slateblue;
+}