Advanced filters frontend

package.json

@@ -10,6 +10,7 @@
   "author": "Arsalaan Ansari",
   "license": "ISC",
   "dependencies": {
+    "@material-ui/core": "^4.11.4",
     "cors": "^2.8.5",
     "express": "^4.16.3",
     "mysql": "^2.16.0",

src/client/src/components/RangeSlider.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/core/Slider';
+
+const useStyles = makeStyles({
+  root: {
+    width: 300,
+  },
+});
+
+function valuetext(value) {
+  return `${value}`;
+}
+
+const MySlider = withStyles({
+    root: {
+      color: '#62a8e5',
+      height: 8,
+    },
+    thumb: {
+      height: 24,
+      width: 24,
+      backgroundColor: '#fff',
+      border: '2px solid currentColor',
+      marginTop: -8,
+      marginLeft: -12,
+      '&:focus, &:hover, &$active': {
+        boxShadow: 'inherit',
+      },
+    },
+    active: {},
+    valueLabel: {
+        left: -6,
+        top: 4,
+        '& *': {
+          background: 'transparent',
+          color: '#000',
+        },
+      },
+    track: {
+      height: 8,
+      borderRadius: 4,
+    },
+    rail: {
+      height: 8,
+      borderRadius: 4,
+    },
+  })(Slider);
+
+export default function RangeSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState([2, 8]);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <MySlider
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="auto"
+        aria-labelledby="range-slider"
+        getAriaValueText={valuetext}
+        min = {1}
+        max = {10}
+        step = {1}
+        valueLabelDisplay = "on"
+      />
+    </div>
+  );
+}