I have tried changing the width or height of the rail property in material ui slider where I grabbed it from Demo on their website. However I am not able to change 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>
  );
}

There is a code here to try:

I can get this on horizontal :

However I cannot get it on vertical mode:

I have tried changing the width or height of the rail property in material ui slider where I grabbed it from Demo on their website. However I am not able to change 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>
  );
}

There is a code here to try: https://codesandbox.io/s/material-demo-bl5pt

I can get this on horizontal :

However I cannot get it on vertical mode:

• javascript
• css
• reactjs
• material-ui

2 Answers 2

I just stumbled across this issue as well. I typically try to avoid using !important when I can, so I thought I would share a solution.

const CustomSlider = withStyles({
  root: {
    color: '#52af77',
    height: 8,
    '&$vertical': {
      width: 8
    }
  },
  thumb: {
    height: 24,
    width: 24,
    backgroundColor: '#fff',
    border: '2px solid currentColor',
    marginTop: -8,
    marginLeft: -12,
    '&:focus, &:hover': {
      boxShadow: '0px 0px 0px 8px rgba(84, 199, 97, 0.16)'
    },
    '&$active': {
      boxShadow: '0px 0px 0px 12px rgba(84, 199, 97, 0.16)'
    }
  },
  active: {},
  valueLabel: {
    left: 'calc(-50% + 4px)'
  },
  track: {
    height: 8,
    borderRadius: 4
  },
  rail: {
    height: 8,
    borderRadius: 4
  },
  vertical: {
    '& $rail': {
      width: 8
    },
    '& $track': {
      width: 8
    },
    '& $thumb': {
      marginLeft: -8,
      marginBottom: -11
    }
  }
})(Slider)

Since materialUI overrides css you can use !important to priorities your own css. So add this to your jss/css: width: "14px !important",

https://codesandbox.io/s/material-demo-782cp?fontsize=14&hidenavigation=1&theme=dark

  rail: {
    height: 24,
    width: "14px !important",
    borderRadius: 24,
    opacity: 1,
  }