re-styled the slider for the bin inventory

src/bin/BinVisualizerV2.tsx

@@ -150,6 +150,26 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     bottomSpacing: {
       marginBottom: theme.spacing(1)
+    },
+    sliderRoot: {},
+    sliderThumb: {
+      left: 23
+    },
+    sliderTrack: {
+      height: "100%",
+    },
+    sliderRail: {
+      height: "100%",
+    },
+    sliderValLabel: {
+      // left: -20,
+      height: 30,
+      width: 30,
+      top: -15,
+      background: "transparent"
+    },
+    sliderLabel: {
+      background: "gold"
     }
   });
 });
@@ -1144,11 +1164,6 @@ export default function BinVisualizer(props: Props) {
             </Box>
           )}
         </Box>
-        {pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
-          <Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: 600 }}>
-            No fans found to calculate CFM
-          </Typography>
-        )}
       </Box>
     );
   };
@@ -1414,6 +1429,14 @@ export default function BinVisualizer(props: Props) {
     );
   };
 
+  const valueLabel = (value: number) => {
+    return (
+      <Box display="flex" sx={{background: sliderColour, height: 30, width: 30, borderRadius: 20}}>
+        <Typography sx={{fontSize: 12, fontWeight: 650, color: "black", textAlign: "center", margin: "auto"}}>{value}%</Typography>
+      </Box>
+    )
+  }
+
   const controls = () => {
     if (bin.settings.inventory?.empty === true) return null;
     return (
@@ -1450,11 +1473,19 @@ export default function BinVisualizer(props: Props) {
                 <Slider
                   orientation="vertical"
                   value={fillPercentage}
-                  style={{ color: sliderColour }}
+                  classes={{
+                    root: classes.sliderRoot,
+                    rail: classes.sliderRail,
+                    track: classes.sliderTrack,
+                    thumb: classes.sliderThumb,
+                    valueLabel: classes.sliderValLabel,
+
+                  }}
+                  style={{ height: "100%", color: sliderColour }}
                   min={0}
                   max={100}
                   valueLabelDisplay="auto"
-                  valueLabelFormat={value => value.toString() + "%"}
+                  valueLabelFormat={valueLabel}
                   onChange={(_, value) => {
                     setFillPercentage(value as number);
                     const capacity = bin.settings.specs ? bin.settings.specs.bushelCapacity : 0;
@@ -1566,6 +1597,11 @@ export default function BinVisualizer(props: Props) {
         <Typography style={{ fontSize: isMobile ? "0.85rem" : "1.0rem", fontWeight: 650 }}>
           Fan Performance
         </Typography>
+        {pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
+          <Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: 600 }}>
+            No fans found to calculate CFM
+          </Typography>
+        )}
         <Box className={classes.displayBox}>
           <Grid
             container