Fix slider styles

1 files changed, 8 insertions, 6 deletions

diff --git a/app/components/Slider.tsx b/app/components/Slider.tsx
index 50223fc..330206f 100644
--- a/app/components/Slider.tsx
+++ b/app/components/Slider.tsx
@@ -12,7 +12,7 @@ interface GeshemSliderProps {
 }
 
 export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
-  const handleStyle = {
+  const handle = {
     height: 40,
     width: 40,
     border: 0,
@@ -20,24 +20,26 @@ export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
     boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
   };
 
-  const railStyle = {
+  const rail = {
     height: 20,
     backgroundColor: "#3498db"
   };
 
-  const trackStyle = {
+  const track = {
     display: "none"
   };
 
+  const styles = {
+    handle, rail, track
+  }
+
   return (
     <div id="slider">
       <CustomSlider
         min={0}
         max={playback ? PLAYBACK_SLOTS : 9}
         defaultValue={slider}
-        handleStyle={handleStyle}
-        railStyle={railStyle}
-        trackStyle={trackStyle}
+        styles={styles}
         onChange={val => setSlider(val)}
       />
     </div>