import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import Slider from "@material-ui/core/Slider"; import { withStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ margin: { height: theme.spacing(3), }, })); const PrettoSlider = withStyles({ root: { color: "#add8e6", height: 8, }, thumb: { height: 24, width: 24, backgroundColor: "#fff", border: "2px solid #eeeeee", 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); const marks = [ { value: -1, label: "Never had a backlog", }, { value: 0, label: "Currently None", }, { value: 1, label: "<=1", }, { value: 2, label: "<=2", }, { value: 3, label: "<=3", }, { value: 4, label: "<=4", }, { value: 5, label: "<=5", }, { value: 6, label: "<=6", }, { value: 7, label: "<=6", }, { value: 8, label: "<=8", }, { value: 9, label: "<=9", }, { value: 10, label: "<=10", }, { value: 11, label: "not applicable", }, ]; function valuetext(value) { return `${value}°C`; } export function Backlogs() { const classes = useStyles(); return ( <div className={classes.root}> <PrettoSlider min={-1} max={11} defaultValue={0} getAriaValueText={valuetext} aria-labelledby="discrete-slider-always" step={1} valueLabelDisplay="auto" /> </div> ); }