I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from / and added an onChange function. 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" ponent="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;
I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from https://material-ui./ponents/slider/ and added an onChange function. 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" ponent="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;
1 Answer
Reset to default 5If you need to customize the theme of MUI Slider then you need to use 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,
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..
Forked Codesandbox
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..
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..