问题描述
我正在尝试使用 Material UI react 输入滑块示例创建一个多拇指滑块。
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';
const useStyles = makeStyles({
root: {
width: 250,},input: {
width: 42,});
export default function InputSlider() {
const classes = useStyles();
const [value,setValue] = React.useState(30);
const handleSliderChange = (event,newValue) => {
setValue(newValue);
};
const handleInputChange = (event) => {
setValue(event.target.value === '' ? '' : Number(event.target.value));
};
const handleBlur = () => {
if (value < 0) {
setValue(0);
} else if (value > 100) {
setValue(100);
}
};
return (
<div className={classes.root}>
<Typography id="input-slider" gutterBottom>
Volume
</Typography>
<Grid container spacing={2} alignItems="center">
<Grid item>
</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: 0,max: 100,type: 'number','aria-labelledby': 'input-slider',}}
/>
</Grid>
</Grid>
</div>
);
}
我想在同一轨道/轨道上有三个单独的拇指和三个单独的输入框。我不想有范围滑块。 像这样的东西。
我尝试自定义 makeStyles()。但是,它似乎不起作用。关于如何实施的任何建议。
材料界面链接:https://material-ui.com/components/slider/#InputSlider.js
我也尝试过使用 getMuiTheme,但没有成功。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)