feat: 🚧 improving slider

src/components/unsorted/WhatDoYouFeelSlider.tsx

@@ -1,73 +1,39 @@
-import { Box, Fab, Grid, Slider, Theme } from '@material-ui/core';
+import { Box, Fab, Grid, Slider } from '@material-ui/core';
 import SatisfiedIcon from '@material-ui/icons/SentimentSatisfiedAlt';
 import DissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import { makeStyles } from '@material-ui/styles';
 import React, { memo } from 'react';
-import { Link } from 'react-router-dom';
-
-const useStyles = makeStyles((theme: Theme) => ({ root: {} }));
 
 interface WhatDoYouFeelSliderProps {}
 
-const marks = [
-  {
-    value: 0,
-    label: '0°C',
-  },
-  {
-    value: 20,
-    label: '20°C',
-  },
-  {
-    value: 37,
-    label: '37°C',
-  },
-  {
-    value: 100,
-    label: '100°C',
-  },
-];
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-function valueLabelFormat(value: number) {
-  return marks.findIndex((mark) => mark.value === value) + 1;
-}
-
 const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
   props: WhatDoYouFeelSliderProps,
 ) {
-  const classes = useStyles();
-
   return (
-    <Box className={classes.root}>
-      <Grid item container xs={12}>
-        <Grid item xs>
-          <Fab component={Link} color="secondary" to={`$isGood`}>
-            <SatisfiedIcon fontSize="large" />
-          </Fab>
+    <Box mt={10}>
+      <Grid item container justify="space-between">
+        <Grid item xs={2}>
+          <Box textAlign="center">
+            <Fab color="secondary">
+              <DissatisfiedIcon fontSize="large" />
+            </Fab>
+          </Box>
         </Grid>
         <Grid item xs>
           <Slider
-            defaultValue={20}
-            valueLabelFormat={valueLabelFormat}
-            getAriaValueText={valuetext}
-            aria-labelledby="discrete-slider-restrict"
-            step={null}
-            valueLabelDisplay="auto"
-            marks={marks}
+            min={0}
+            max={100}
+            step={25}
+            defaultValue={0}
+            valueLabelDisplay="off"
+            onChangeCommitted={console.log}
           />
         </Grid>
-        <Grid item xs>
-          <Fab
-            component={Link}
-            color="primary"
-            to={`$/isTroublesome`}
-          >
-            <DissatisfiedIcon fontSize="large" />
-          </Fab>
+        <Grid item xs={2}>
+          <Box textAlign="center">
+            <Fab color="primary">
+              <SatisfiedIcon fontSize="large" />
+            </Fab>
+          </Box>
         </Grid>
       </Grid>
     </Box>