@mui/material#Slider JavaScript Examples

export default function ContinuousSlider() {
  const [value, setValue] = React.useState(30);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box width={200}>
      <Typography id="continuous-slider" gutterBottom>
        Volume
      </Typography>

      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
        <VolumeDown />
        <Slider aria-label="Volume" value={value} onChange={handleChange} />
        <VolumeUp />
      </Stack>

      <Slider disabled defaultValue={30} aria-label="Disabled slider" />
    </Box>
  );
}

export default function CustomizedSlider() {
  return (
    <PaperRoot>
      <Typography gutterBottom>iOS</Typography>
      <IOSSlider aria-label="iOS slider" defaultValue={60} marks={marks} valueLabelDisplay="on" />
      <div className="margin" />
      <Typography gutterBottom>pretto.fr</Typography>
      <PrettoSlider valueLabelDisplay="auto" aria-label="Pretto slider" defaultValue={20} />
      <div className="margin" />
      <Typography gutterBottom>Tooltip value label</Typography>
      <Slider
        ValueLabelComponent={ValueLabelComponent}
        aria-label="Custom thumb label"
        defaultValue={20}
      />
      <div className="margin" />
      <Typography gutterBottom>Airbnb</Typography>
      <AirbnbSlider
        ThumbComponent={AirbnbThumbComponent}
        aria-label="Airbnb slider"
        defaultValue={[20, 40]}
      />
    </PaperRoot>
  );
}

PrettoSlider = styled(Slider)(() => ({
  height: 8,
  color: "#52af77",
  "& .thumb": {
    height: 24,
    width: 24,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    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,
  },
}))

AirbnbSlider = styled(Slider)(() => ({
  height: 3,
  color: "#3a8589",
  padding: "13px 0",
  "& .thumb": {
    height: 27,
    width: 27,
    backgroundColor: "#fff",
    border: "1px solid currentColor",
    marginTop: -12,
    marginLeft: -13,
    boxShadow: "#ebebeb 0px 2px 2px",
    "&:focus,&:hover,&$active": {
      boxShadow: "#ccc 0px 2px 3px 1px",
    },
    "& .bar": {
      height: 9,
      width: 1,
      backgroundColor: "currentColor",
      marginLeft: 1,
      marginRight: 1,
    },
  },
  "& .active": {},
  "& .valueLabel": {
    left: "calc(-50% + 4px)",
  },
  "& .track": {
    height: 3,
  },
  "& .rail": {
    color: "#d8d8d8",
    opacity: 1,
    height: 3,
  },
}))

export default function RangeSlider() {
  const [value, setValue] = React.useState([20, 37]);

  const handleChange = (_, newValue) => {
    setValue(newValue);
  };

  return (
    <Box width={300}>
      <Typography id="range-slider" gutterBottom>
        Temperature range
      </Typography>

      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

export default function VerticalSlider() {

    return (
        <React.Fragment>
            <Typography id="vertical-slider" gutterBottom>
                Temperature
            </Typography>
            <Box height={300}>
                <Slider
                    orientation="vertical"
                    getAriaValueText={valuetext}
                    defaultValue={30}
                    aria-labelledby="vertical-slider"
                />
                <Slider
                    disabled
                    orientation="vertical"
                    getAriaValueText={valuetext}
                    defaultValue={30}
                    aria-labelledby="vertical-slider"
                />
                <Slider
                    orientation="vertical"
                    defaultValue={[20, 37]}
                    aria-labelledby="vertical-slider"
                    getAriaValueText={valuetext}
                    marks={marks}
                />
            </Box>
        </React.Fragment>
    )
}

IOSSlider = styled(Slider)(() => ({
  color: "#3880ff",
  height: 2,
  padding: "15px 0",
  "& .thumb": {
    height: 28,
    width: 28,
    backgroundColor: "#fff",
    boxShadow: iOSBoxShadow,
    marginTop: -14,
    marginLeft: -14,
    "&: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)",
      "@media (hover: none)": { boxShadow: iOSBoxShadow },
    },
  },
  "& .active": {},
  "& .valueLabel": {
    left: "calc(-50% + 11px)",
    top: -22,
    "& *": {
      background: "transparent",
      color: "#000",
    },
  },
  "& .track": {
    height: 2,
  },
  "& .rail": {
    height: 2,
    opacity: 0.5,
    backgroundColor: "#bfbfbf",
  },
  "& .mark": {
    backgroundColor: "#bfbfbf",
    height: 8,
    width: 1,
    marginTop: -3,
  },
  "& .markActive": {
    backgroundColor: "currentColor",
  },
}))

export default function DiscreteSlider() {
  return (
    <SliderRoot>
      <Typography id="discrete-slider" gutterBottom>
        Temperature
      </Typography>

      <Slider
        marks
        step={10}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider"
      />

      <Box className="margin" />

      <Typography id="discrete-slider-custom" gutterBottom>
        Custom marks
      </Typography>

      <Slider
        step={10}
        marks={marks}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider-custom"
      />

      <div className="margin" />

      <Typography id="discrete-slider-restrict" gutterBottom>
        Restricted values
      </Typography>

      <Slider
        step={null}
        marks={marks}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        valueLabelFormat={valueLabelFormat}
        aria-labelledby="discrete-slider-restrict"
      />

      <div className="margin" />

      <Typography id="discrete-slider-always" gutterBottom>
        Always visible
      </Typography>

      <Slider
        step={10}
        marks={marks}
        defaultValue={80}
        valueLabelDisplay="on"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider-always"
      />
    </SliderRoot>
  );
}

export default function InputSlider() {
  const [value, setValue] = React.useState(30);
  const handleSliderChange = (_, newValue) => {
    setValue(newValue);
  };

  const handleInputChange = (event) => {
    setValue(event.target.value === "" ? "" : Number(event.target.value));
  };
  const handleBlur = () => {
    if (value < 0) {
      setValue(0);
    } else if (value > 100) {
      setValue(100);
    }
  };

  return (
    <Box width={250}>
      <Typography id="input-slider" gutterBottom>
        Volume
      </Typography>
      <Grid container spacing={2} alignItems="center">
        <Grid item>
          <VolumeUp />
        </Grid>
        <Grid item xs>
          <Slider
            value={typeof value === "number" ? value : 0}
            onChange={handleSliderChange}
            aria-labelledby="input-slider"
          />
        </Grid>
        <Grid item>
          <Input
            value={value}
            margin="dense"
            sx={{ width: 42 }}
            onChange={handleInputChange}
            onBlur={handleBlur}
            inputProps={{
              step: 10,
              min: 0,
              max: 100,
              type: "number",
              "aria-labelledby": "input-slider",
            }}
          />
        </Grid>
      </Grid>
    </Box>
  );
}

render() {
    const { classes, t, syncPolicy, defaultPolicy, handleChange, handleSlider, handleCheckbox } = this.props;

    const { reqdevenc, allowsimpledevpw, devpwenabled, devpwexpiration, maxinacttimedevlock,
      devpwhistory, alphanumpwreq, maxdevpwfailedattempts, mindevpwlenngth, allowstoragecard,
      mindevcomplexchars } = syncPolicy;
    return (
      <FormControl className={classes.form}>
        <Typography variant="h6" className={classes.header}>{t('General')}</Typography>
        <FormControlLabel
          control={
            <Checkbox
              className={reqdevenc === defaultPolicy.reqdevenc ? "": classes.blueCheckbox}
              checked={!!reqdevenc}
              onChange={handleCheckbox('reqdevenc')}
              color={reqdevenc === defaultPolicy.reqdevenc ? "default" : "primary"}
            />
          }
          label={t('Require encryption on device')}
        />
        <FormControlLabel
          control={
            <Checkbox
              className={allowstoragecard === defaultPolicy.allowstoragecard ? "" : classes.blueCheckbox}
              checked={!!allowstoragecard}
              onChange={handleCheckbox('allowstoragecard')}
              color={allowstoragecard === defaultPolicy.allowstoragecard ? "default" : "primary"}
            />
          }
          label={t('Require encryption on storage card')}
        />
        <Typography variant="h6" className={classes.header}>{t('Passwords')}</Typography>
        <FormControlLabel
          control={
            <Checkbox
              className={devpwenabled === defaultPolicy.devpwenabled ? "" : classes.blueCheckbox}
              checked={!!devpwenabled}
              onChange={handleCheckbox('devpwenabled')}
              color={devpwenabled === defaultPolicy.devpwenabled ? "default" : "primary"}
            />
          }
          label={t('Password required')}
        />
        <FormControlLabel
          control={
            <Checkbox
              className={allowsimpledevpw === defaultPolicy.allowsimpledevpw ? "" : classes.blueCheckbox}
              checked={!!allowsimpledevpw}
              onChange={handleCheckbox('allowsimpledevpw')}
              color={allowsimpledevpw === defaultPolicy.allowsimpledevpw ? "default" : "primary"}
            />
          }
          label={t('Allow simple passwords')}
          style={{ marginBottom: 8 }}
        />
        <div>
          <Typography gutterBottom>
            {t('Minumim password length')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevpwlenngth || 4}
            valueLabelDisplay="auto"
            color={mindevpwlenngth === defaultPolicy.mindevpwlenngth ? "secondary" : "primary"}
            step={1}
            marks
            min={1}
            max={16}
            onChange={handleSlider("mindevpwlenngth")}
          />
        </div>
        <FormControlLabel
          control={
            <Checkbox
              className={alphanumpwreq === defaultPolicy.alphanumpwreq ? "" : classes.blueCheckbox}
              checked={!!alphanumpwreq}
              onChange={handleCheckbox('alphanumpwreq')}
              color={alphanumpwreq === defaultPolicy.alphanumpwreq ? "default" : "primary"}
            />
          }
          label={t('Require alphanumeric password')}
          style={{ marginBottom: 8 }}
        />
        <div>
          <Typography gutterBottom>
            {t('Minumim password character sets')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevcomplexchars || 3}
            valueLabelDisplay="auto"
            color={mindevcomplexchars === defaultPolicy.mindevcomplexchars ? "secondary" : "primary"}
            step={1}
            marks
            min={1}
            max={4}
            onChange={handleSlider("mindevcomplexchars")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Number of failed attempts allowed')}
          </Typography>
          <Slider
            className={classes.slider}
            value={maxdevpwfailedattempts || 8}
            valueLabelDisplay="auto"
            color={maxdevpwfailedattempts === defaultPolicy.maxdevpwfailedattempts ? "secondary" : "primary"}
            step={1}
            marks
            min={4}
            max={16}
            onChange={handleSlider("maxdevpwfailedattempts")}
          />
        </div>
        <TextField
          className={classes.slider}
          label={t('Password expiration (days)')}
          value={devpwexpiration}
          InputLabelProps={{
            className: devpwexpiration === defaultPolicy.devpwexpiration ? "" : classes.blueCheckbox,
          }}
          onChange={handleChange("devpwexpiration")}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Inactivity (seconds) before device locks itself")}
          value={maxinacttimedevlock}
          onChange={handleChange("maxinacttimedevlock")}
          InputLabelProps={{
            className: maxinacttimedevlock === defaultPolicy.maxinacttimedevlock ? "" : classes.blueCheckbox,
          }}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          style={{ marginBottom: 16 }}
          label={t("Password history")}
          value={devpwhistory}
          InputLabelProps={{
            className: devpwhistory === defaultPolicy.devpwhistory ? "" : classes.blueCheckbox,
          }}
          onChange={handleChange("devpwhistory")}
          variant="standard"
        />
      </FormControl>
    );
  }

render() {
    const { classes, t, syncPolicy, handleChange, handleRadio,
      handleSlider, handleCheckbox } = this.props;
    const { allowbluetooth, allowbrowser, allowcam, allowconsumeremail, allowdesktopsync,
      allowhtmlemail, allowinternetsharing, allowirda, allowpopimapemail, allowremotedesk,
      allowsimpledevpw, allowsmimeencalgneg, allowsmimesoftcerts, allowstoragecard,
      allowtextmessaging, allowunsignedapps, allowunsigninstallpacks, allowwifi, alphanumpwreq,
      approvedapplist, attenabled, devencenabled, devpwenabled, devpwexpiration, devpwhistory,
      maxattsize, maxcalagefilter, maxdevpwfailedattempts, maxemailagefilter, maxemailbodytruncsize,
      maxemailhtmlbodytruncsize, maxinacttimedevlock, mindevcomplexchars, mindevpwlenngth,
      pwrecoveryenabled, reqdevenc, reqencsmimealgorithm, reqencsmimemessages, reqmansyncroam,
      reqsignedsmimealgorithm, reqsignedsmimemessages, unapprovedinromapplist } = syncPolicy;
    return (
      <FormControl className={classes.form}>
        <Typography variant="h6" className={classes.header}>{t('Apps and devices')}</Typography>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow Bluetooth')}</FormLabel>
          <RadioGroup
            row
            value={syncPolicy.allowbluetooth !== undefined ? syncPolicy.allowbluetooth :
              allowbluetooth === undefined ? '' : allowbluetooth}
            onChange={handleRadio('allowbluetooth')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Disabled')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Allow only HFP')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Allow')} />
          </RadioGroup>
        </FormControl>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowbrowser}
                onChange={handleCheckbox('allowbrowser')}
                color="primary"
              />
            }
            label={t('Allow browser')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowcam}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Allow cam')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowtextmessaging}
                onChange={handleCheckbox('allowtextmessaging')}
                color="primary"
              />
            }
            label={t('Allow text messaging')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsignedapps}
                onChange={handleCheckbox('allowunsignedapps')}
                color="primary"
              />
            }
            label={t('Allow unsigned apps')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowunsigninstallpacks}
                onChange={handleCheckbox('allowunsigninstallpacks')}
                color="primary"
              />
            }
            label={t('Allow unsigned install packs')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowinternetsharing}
                onChange={handleCheckbox('allowinternetsharing')}
                color="primary"
              />
            }
            label={t('Allow internet sharing')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowirda}
                onChange={handleCheckbox('allowirda')}
                color="primary"
              />
            }
            label={t('Allow IrDA')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowstoragecard}
                onChange={handleCheckbox('allowstoragecard')}
                color="primary"
              />
            }
            label={t('Allow storage card')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowwifi}
                onChange={handleCheckbox('allowwifi')}
                color="primary"
              />
            }
            label={t('Allow WiFi')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={approvedapplist}
            onChange={handleChange("approvedapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Not approved in-ROM applications")}
            helperText="app1,app2,app3,..."
            color="primary"
            value={unapprovedinromapplist}
            onChange={handleChange("unapprovedinromapplist")}
          />
          <TextField
            className={classes.gridTf}
            label={t("Inactivity (seconds) before device locks itself")}
            color="primary"
            value={maxinacttimedevlock}
            onChange={handleChange("maxinacttimedevlock")}
          />
        </Grid>


        <Typography variant="h6" className={classes.header}>{t('Passwords')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!alphanumpwreq}
                onChange={handleCheckbox('alphanumpwreq')}
                color="primary"
              />
            }
            label={t('Requires alphanumeric password')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devpwenabled}
                onChange={handleCheckbox('devpwenabled')}
                color="primary"
              />
            }
            label={t('Device password required')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsimpledevpw}
                onChange={handleCheckbox('allowsimpledevpw')}
                color="primary"
              />
            }
            label={t('Allow simple passwords')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!pwrecoveryenabled}
                onChange={handleCheckbox('pwrecoveryenabled')}
                color="primary"
              />
            }
            label={t('Password recovery enabled')}
          />
        </Grid>
        <Grid container>
          <TextField
            className={classes.gridTf}
            label={t("Min number of passwords to store")}
            color="primary"
            value={devpwhistory}
            onChange={handleChange("devpwhistory")}
          />
          <TextField
            className={classes.gridTf}
            label={t('Device password history')}
            color="primary"
            value={devpwexpiration}
            onChange={handleChange("devpwexpiration")}
          />
        </Grid>
        <div>
          <Typography gutterBottom>
            {t('Max failed password attempts')}
          </Typography>
          <Slider
            className={classes.slider}
            value={maxdevpwfailedattempts || 8}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={4}
            max={16}
            onChange={handleSlider("maxdevpwfailedattempts")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim device password length')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevpwlenngth || 4}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={16}
            onChange={handleSlider("mindevpwlenngth")}
          />
        </div>
        <div>
          <Typography gutterBottom>
            {t('Minumim password character classes')}
          </Typography>
          <Slider
            className={classes.slider}
            value={mindevcomplexchars || 3}
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={4}
            onChange={handleSlider("mindevcomplexchars")}
          />
        </div>




        <Typography variant="h6" className={classes.header}>{t('Encryption and signing')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowsmimesoftcerts}
                onChange={handleCheckbox('allowsmimesoftcerts')}
                color="primary"
              />
            }
            label={t('Allow soft certificates')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqdevenc}
                onChange={handleCheckbox('allowcam')}
                color="primary"
              />
            }
            label={t('Device encryption')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqencsmimemessages}
                onChange={handleCheckbox('reqencsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires encrypted messages')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!devencenabled}
                onChange={handleCheckbox('devencenabled')}
                color="primary"
              />
            }
            label={t('Enable device encryption (Deprecated)')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqsignedsmimemessages}
                onChange={handleCheckbox('reqsignedsmimemessages')}
                color="primary"
              />
            }
            label={t('Requires message signing')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Encrypt algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqencsmimealgorithm === undefined ? '' : reqencsmimealgorithm}
            onChange={handleRadio('reqencsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="TripleDES" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="DES" />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label="RC2128bit" />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label="RC264bit" />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label="RC240bit" />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Allow encrypt algorithm negotiation')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={allowsmimeencalgneg === undefined ? '' : allowsmimeencalgneg}
            onChange={handleRadio('allowsmimeencalgneg')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Not allow')} />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('Only strong')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('Any')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Message signing algorithm')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={reqsignedsmimealgorithm === undefined ? '' : reqsignedsmimealgorithm}
            onChange={handleRadio('reqsignedsmimealgorithm')}
          >
            <FormControlLabel value={0} control={<Radio color="primary"/>} label="SHA1" />
            <FormControlLabel value={1} control={<Radio color="primary"/>} label="MD5" />
          </RadioGroup>
        </FormControl>




        <Typography variant="h6" className={classes.header}>{t('E-Mail')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowhtmlemail}
                onChange={handleCheckbox('allowhtmlemail')}
                color="primary"
              />
            }
            label={t('Allow html E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowconsumeremail}
                onChange={handleCheckbox('allowconsumeremail')}
                color="primary"
              />
            }
            label={t('Allow consumer E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowpopimapemail}
                onChange={handleCheckbox('allowpopimapemail')}
                color="primary"
              />
            }
            label={t('Allow POP/IMAP E-Mail')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!attenabled}
                onChange={handleCheckbox('attenabled')}
                color="primary"
              />
            }
            label={t('Enable attachments')}
          />
        </Grid>
        <TextField
          className={classes.slider}
          label={t("Max attachment size")}
          color="primary"
          value={maxattsize}
          onChange={handleChange("maxattsize")}
          InputProps={{
            endAdornment: 'MB',
          }}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for plain-text E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailbodytruncsize}
          onChange={handleChange("maxemailbodytruncsize")}
          variant="standard"
          style={{ marginBottom: 8 }}
        />
        <TextField
          className={classes.slider}
          label={t("Truncation size for HTML E-Mails")}
          helperText="(-1=unlimited, 0=header only, >0=truncate to size)"
          color="primary"
          value={maxemailhtmlbodytruncsize}
          onChange={handleChange("maxemailhtmlbodytruncsize")}
          variant="standard"
        />


        <Typography variant="h6" className={classes.header}>{t('Synchronisation')}</Typography>
        <Grid container>
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowremotedesk}
                onChange={handleCheckbox('allowremotedesk')}
                color="primary"
              />
            }
            label={t('Allow remote desk')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!reqmansyncroam}
                onChange={handleCheckbox('reqmansyncroam')}
                color="primary"
              />
            }
            label={t('Requires manual synchronization')}
          />
          <FormControlLabel
            control={
              <Checkbox
                checked={!!allowdesktopsync}
                onChange={handleCheckbox('allowdesktopsync')}
                color="primary"
              />
            }
            label={t('Allow desktop sync')}
          />
        </Grid>
        <FormControl component="fieldset" className={classes.radio}>
          <FormLabel component="legend">{t('Max calendar age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxcalagefilter === undefined ? '' : maxcalagefilter}
            onChange={handleRadio('maxcalagefilter')}
          >
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={6} control={<Radio color="primary"/>} label={t('3 months')} />
            <FormControlLabel value={7} control={<Radio color="primary"/>} label={t('6 months')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('Unlimited')} />
          </RadioGroup>
        </FormControl>
        <FormControl component="fieldset" className={classes.radio} style={{ marginBottom: 8 }}>
          <FormLabel component="legend">{t('Max E-Mail age')}</FormLabel>
          <RadioGroup
            color="primary"
            row
            value={maxemailagefilter === undefined ? '' : maxemailagefilter}
            onChange={handleRadio('maxemailagefilter')}
          >
            <FormControlLabel value={1} control={<Radio color="primary"/>} label={t('1 day')} />
            <FormControlLabel value={2} control={<Radio color="primary"/>} label={t('3 days')} />
            <FormControlLabel value={3} control={<Radio color="primary"/>} label={t('1 week')} />
            <FormControlLabel value={4} control={<Radio color="primary"/>} label={t('2 weeks')} />
            <FormControlLabel value={5} control={<Radio color="primary"/>} label={t('1 month')} />
            <FormControlLabel value={0} control={<Radio color="primary"/>} label={t('All')} />
          </RadioGroup>
        </FormControl>
      </FormControl>
    );
  }