After attempting to adjust the width and height of the rail property on the material ui slider I obtained from their website demo, I have encountered an issue with changing the thickness.
import React from "react";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
const useStyles = makeStyles(theme => ({
root: {
width: 300 + theme.spacing(3) * 2
},
margin: {
height: theme.spacing(3)
}
}));
const PrettoSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "4px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
track: {
height: 8,
borderRadius: 0
},
rail: {
height: 8,
borderRadius: 0,
opacity: 1
}
})(Slider);
export default function CustomizedSlider() {
const classes = useStyles();
return (
<div className={classes.root} style={{ height: "100vh" }}>
<PrettoSlider
orientation="vertical"
aria-label="pretto slider"
defaultValue={20}
/>
</div>
);
}
Feel free to experiment with this code in a sandbox environment here: https://codesandbox.io/s/material-demo-bl5pt
While achieving the desired appearance on the horizontal axis: https://i.stack.imgur.com/42QZY.png
I'm currently facing difficulties in obtaining the same result in vertical mode: https://i.stack.imgur.com/Y7zPW.png