What does $active means in Material-UI?

Question

When I used Material-UI slider and customized it, I found on the doc this piece of code for styling :

const AirbnbSlider = withStyles({
  root: {
    color: '#3a8589',
    height: 3,
    padding: '13px 0',
  },
  thumb: {
    height: 27,
    width: 27,
    backgroundColor: '#fff',
    border: '1px solid currentColor',
    marginTop: -12,
    marginLeft: -13,
    boxShadow: '#ebebeb 0 2px 2px',
    '&:focus, &:hover, &$active': {
      boxShadow: '#ccc 0 2px 3px 1px',
    },
    '& .bar': {
      // display: inline-block !important;
      height: 9,
      width: 1,
      backgroundColor: 'currentColor',
      marginLeft: 1,
      marginRight: 1,
    },
  },
  active: {},
  track: {
    height: 3,
  },
  rail: {
    color: '#d8d8d8',
    opacity: 1,
    height: 3,
  },
})(Slider);

I thought this was a typo at first, but by looking at the MUI source, there were a few times when &$active is used, and not &:active. I was wondering what it does, as I don't find any use of $ in CSS, and found no variables relative to this $active state.

What's the difference between &:active and &$active here ?

Thanks for your time!