@adeelasif/awesome-editor/dist/InputSlider.js

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 /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(Grid, {
    container: true,
    spacing: 2,
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Grid, {
    item: true,
    xs: true
  }, /*#__PURE__*/React.createElement(Slider, {
    value: typeof value === "number" ? value : 0,
    onChange: handleSliderChange,
    "aria-labelledby": "input-slider"
  })), /*#__PURE__*/React.createElement(Grid, {
    item: true
  }, /*#__PURE__*/React.createElement(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"
    }
  }))));
}