63 lines
1.2 KiB
JavaScript
63 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import logo from "./logo.svg";
|
|
import "./App.css";
|
|
import { makeStyles } from "@material-ui/styles";
|
|
import Slider from "@material-ui/core/Slider";
|
|
|
|
import MidiComponent from "./components/MidiComponent";
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
width: 127,
|
|
},
|
|
});
|
|
|
|
function valuetext(value) {
|
|
return `${value}`;
|
|
}
|
|
|
|
function SettingSlider() {
|
|
const classes = useStyles();
|
|
const [value, setValue] = React.useState(0);
|
|
const handleEvent = (event, newValue) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Slider
|
|
value={value}
|
|
getAriaValueText={valuetext}
|
|
valueLabelDisplay="auto"
|
|
onChange={handleEvent}
|
|
min={0}
|
|
max={127}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<div>
|
|
<SettingSlider />
|
|
<MidiComponent />
|
|
</div>
|
|
<a
|
|
className="App-link"
|
|
href="https://reactjs.org"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Learn React
|
|
</a>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|