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 + + )}