I have a slider currently working in a react function component. I wonder how can I implement the below slider correctly in a React class component?
import * as React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';
function valuetext(value) {
return `${value}°C`;
}
export default function RangeSlider() {
const [value, setValue] = React.useState([20, 37]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: 300 }}>
<br /><br />
<Slider
getAriaLabel={() => 'Temperature range'}
value={value}
onChange={handleChange}
valueLabelDisplay="on"
getAriaValueText={valuetext}
/>
</Box>
);
}
Focused on class components, you will have to:
this.state instead of React.useStatehandleChange function)You have a code sandbox working here: https://codesandbox.io/s/clever-wildflower-kzjck?file=/src/ClassSlider.js
It'd be like:
function valuetext(value) {
return `${value}°C`;
}
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = { value: [20, 37] };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event, newValue) {
this.setState({
value: newValue
});
}
render() {
return (
<Box sx={{ width: 300 }}>
<br />
<br />
<Slider
getAriaLabel={() => "Temperature range"}
value={this.state.value}
onChange={this.handleChange}
valueLabelDisplay="on"
getAriaValueText={valuetext}
/>
</Box>
);
}
}
export default ClassComponent;
const minDistance = 10;
export default function MinimumDistanceSlider() {
const [value, setValue] = React.useState([20, 37]);
const handleChange1 = (event, newValue, activeThumb) => {
if (!Array.isArray(newValue)) {
return;
}
if (activeThumb === 0) {
setValue([Math.min(newValue[0], value[1] - minDistance), value[1]]);
} else {
setValue([value1[0], Math.max(newValue[1], value[0] + minDistance)]);
}
};
try this