[英]Material UI Slider won't slide
I have a Material UI slider that won't slide when you click on it and drag it.我有一个 Material UI 滑块,当您单击它并拖动它时不会滑动。 I've more or less copied one of the examples from https://material-ui.com/components/slider/ and added an onChange function.
我或多或少地从https://material-ui.com/components/slider/复制了一个示例,并添加了一个 onChange 函数。 The values update just fine if you click around to different spots.
如果您单击不同的位置,这些值会更新得很好。 I've been staring at this too long and have gone code blind and can't figure out what I'm missing.
我已经盯着这个太久了,并且已经对代码视而不见,无法弄清楚我错过了什么。
Here's a link to a Sandbox这是沙盒的链接
import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/styles/withStyles";
import Card from "@material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "@material-ui/core";
import Slider from "@material-ui/core/Slider";
function App(props) {
const [state, setState] = useState({
fields: {
contractAmount: 10000,
termValue: 2
}
});
const handleInvestmentChange = name => (e, value) => {
setState({
...state,
fields: {
...state.fields,
[name]: value
}
});
};
const AmountSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
const TermSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 4px)"
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
return (
<div>
<CssBaseline />
<Typography variant="h4" align="center" component="h1" gutterBottom>
Select your Investment Level
</Typography>
<Card>
<Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
<Grid container alignItems="flex-start" spacing={2}>
<Grid item xs={12} lg={12} xl={12}>
<Typography variant="h4">Investment Amount</Typography>
<Typography variant="h6" gutterBottom>
${state.fields.contractAmount.toLocaleString()}
</Typography>
<AmountSlider
valueLabelDisplay="auto"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
<Typography variant="h4">Investment Term</Typography>
<Typography variant="h6" gutterBottom>
{state.fields.termValue} years
</Typography>
<TermSlider
name="termValue"
valueLabelDisplay="off"
aria-label="term slider"
defaultValue={10}
value={
typeof state.fields.termValue === "number"
? state.fields.termValue
: 2
}
onChange={handleInvestmentChange("termValue")}
min={2}
max={25}
/>
<Grid
item
style={{
marginTop: 16,
alignContent: "right",
alignItems: "right"
}}
>
<Typography variant="p">
*Your investment amount and contract length can be changed at
any time as described in our Terms & Conditions.
</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
</Card>
</div>
);
}
export default App;
If you need to customize the theme of MUI Slider then you need to use MUI Theme Provider .如果您需要自定义 MUI Slider 的主题,则需要使用MUI Theme Provider 。
And you need to import it like,你需要像这样导入它
import { ThemeProvider, createMuiTheme } from "@material-ui/styles";
Then try moving your custom css into a variable with the value of createMuiTheme
method which has overrides
property like,然后尝试将您的自定义 css 移动到一个具有
createMuiTheme
方法值的变量中,该方法具有overrides
属性,例如,
const AmountSlider = createMuiTheme({
overrides: {
MuiSlider: {
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
}
}
});
Then in template use it like,然后在模板中使用它,例如,
<ThemeProvider theme={AmountSlider}>
<Slider
valueLabelDisplay="off"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
</ThemeProvider>
Same way you can implement the custom theme for TermSlider as well..同样,您也可以为 TermSlider 实现自定义主题..
Note: I think you are using the same css for both AmountSlider
and TermSlider
if so, create a single theme variable and use it for both..注意:我认为您对
AmountSlider
和TermSlider
使用相同的 css,如果是这样,请创建一个主题变量并将其用于两者。
Eg.., You could use theme={AmountSlider}
for both the Amount and Term sliders if both has the same css.. Ofcourse the variable name can be unique in this case..例如,如果两者具有相同的 css,您可以对 Amount 和 Term 滑块使用
theme={AmountSlider}
。当然,在这种情况下,变量名称可以是唯一的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.