@adeelasif/awesome-editor/src/components/InputSlider.jsx

A full fledge web based photo editor

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
// import Typography from '@material-ui/core/Typography';
import Slider from "@material-ui/core/Slider";
import Input from "@material-ui/core/Input";
// import VolumeUp from '@material-ui/icons/VolumeUp';

const useStyles = makeStyles({
  root: {
    // width: 250,
  },
  input: {
    // width: 42,
  },
});
const min = -100;
const max = 200;
const defaultValue = 0;
export default function InputSlider({ onChange }) {
  const classes = useStyles();
  const [value, setValue] = React.useState(defaultValue);

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
    onChange(value);
  };

  const handleInputChange = (event) => {
    const value = event.target.value === "" ? "" : Number(event.target.value);
    setValue(value);
    onChange(value);
  };

  const handleBlur = () => {
    if (value < min) {
      setValue(min);
    } else if (value > max) {
      setValue(max);
    }
  };

  return (
    <div className={classes.root}>
      {/* <Typography id="input-slider" gutterBottom>
        Volume
      </Typography> */}
      <Grid container spacing={2} alignItems="center">
        {/* <Grid item>
          <VolumeUp />
        </Grid> */}
        <Grid item xs>
          <Slider
            value={typeof value === "number" ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
          />
        </Grid>
        <Grid item>
          <Input
            className={classes.input}
            value={value}
            margin="dense"
            onChange={handleInputChange}
            onBlur={handleBlur}
            inputProps={{
              step: 10,
              min: min,
              max: max,
              type: "number",
              "aria-labelledby": "input-slider",
            }}
          />
        </Grid>
      </Grid>
    </div>
  );
}