diff --git a/src/bin/BinVisualizerV2.tsx b/src/bin/BinVisualizerV2.tsx
index 3a38722..79e61c1 100644
--- a/src/bin/BinVisualizerV2.tsx
+++ b/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) {
)}
- {pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
-
- No fans found to calculate CFM
-
- )}
);
};
@@ -1414,6 +1429,14 @@ export default function BinVisualizer(props: Props) {
);
};
+ const valueLabel = (value: number) => {
+ return (
+
+ {value}%
+
+ )
+ }
+
const controls = () => {
if (bin.settings.inventory?.empty === true) return null;
return (
@@ -1450,11 +1473,19 @@ export default function BinVisualizer(props: Props) {
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) {
Fan Performance
+ {pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
+
+ No fans found to calculate CFM
+
+ )}