{"size": 1314, "ext": "js", "max_stars_repo_path": "webapp/src/components/RateSlider/index.js", "max_stars_repo_name": "leisterfrancisco/eos-rate", "max_stars_repo_stars_event_min_datetime": "2018-12-02T00:59:03.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-15T02:44:00.000Z", "max_issues_repo_path": "webapp/src/components/RateSlider/index.js", "max_issues_repo_name": "leisterfrancisco/eos-rate", "max_issues_repo_issues_event_min_datetime": "2018-11-01T13:18:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T20:03:25.000Z", "max_forks_repo_path": "webapp/src/components/RateSlider/index.js", "max_forks_repo_name": "leisterfrancisco/eos-rate", "max_forks_repo_forks_event_min_datetime": "2018-11-18T23:30:34.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-23T21:08:13.000Z"}
{"max_stars_count": 20, "max_issues_count": 516, "max_forks_count": 34, "avg_line_length": 23.4642857143, "max_line_length": 91, "alphanum_fraction": 0.5532724505}
import { styled } from '@mui/material/styles'
import Slider from '@mui/material/Slider'

const RateSlider = styled(Slider)({
  color: '#443f56',
  height: 2,
  padding: '15px 0',
  '& .MuiSlider-thumb': {
    width: 15,
    height: 15,
    backgroundColor: '#443f56',
    boxShadow:
      '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)',
    '&:focus,&:hover,&$active': {
      boxShadow:
        '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        boxShadow:
          '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'
      }
    }
  },
  '& .MuiSlider-valueLabel': {
    left: 'auto',
    top: 0,
    background: 'transparent',
    '& *': {
      background: 'transparent',
      color: '#000',
      fontSize: 12,
      fontWeight: '400'
    }
  },
  '& .MuiSlider-track': {
    height: 0
  },
  '& .MuiSlider-rail': {
    height: 4,
    opacity: 0.5,
    backgroundColor: '#9e9e9e'
  },
  '& .MuiSlider-mark': {
    backgroundColor: '#9e9e9e',
    height: 16,
    width: 2,
    marginTop: 0
  },
  '& .MuiSlider-markActive': {
    opacity: 1,
    backgroundColor: 'currentColor'
  }
})

export default RateSlider
