text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import Slider, { SliderThumb } from '@material-ui/lab/SliderStyled';
  import { experimentalStyled as styled } from '@material-ui/core/styles';
  import Typography from '@material-ui/core/Typography';
  import Tooltip from '@material-ui/core/Tooltip';
  
  const Root = styled('div')(
    ({ theme }) => `
    width: calc(300px + ${theme.spacing(6)});
  `,
  );
  
  const Separator = styled('div')(
    ({ theme }) => `
    height: ${theme.spacing(3)};
  `,
  );
  
  function ValueLabelComponent(props) {
    const { children, open, value } = props;
  
    return (
      <Tooltip open={open} enterTouchDelay={0} placement="top" title={value}>
        {children}
      </Tooltip>
    );
  }
  
  ValueLabelComponent.propTypes = {
    children: PropTypes.element.isRequired,
    open: PropTypes.bool.isRequired,
    value: PropTypes.number.isRequired,
  };
  
  const iOSBoxShadow =
    '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)';
  
  const marks = [
    {
      value: 0,
    },
    {
      value: 20,
    },
    {
      value: 37,
    },
    {
      value: 100,
    },
  ];
  
  const IOSSlider = styled(Slider)({
    color: '#3880ff',
    height: 2,
    padding: '15px 0',
    '& .MuiSlider-thumb': {
      height: 28,
      width: 28,
      backgroundColor: '#fff',
      boxShadow: iOSBoxShadow,
      marginTop: -14,
      marginLeft: -14,
      '&:focus, &:hover, &.Mui-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: iOSBoxShadow,
        },
      },
    },
    '& .MuiSlider-valueLabel': {
      left: 'calc(-50% + 12px)',
      top: -22,
      '& *': {
        background: 'transparent',
        color: '#000',
      },
    },
    '& .MuiSlider-track': {
      height: 2,
    },
    '& .MuiSlider-rail': {
      height: 2,
      opacity: 0.5,
      backgroundColor: '#bfbfbf',
    },
    '& .MuiSlider-mark': {
      backgroundColor: '#bfbfbf',
      height: 8,
      width: 1,
      marginTop: -3,
      '&.MuiSlider-markActive': {
        opacity: 1,
        backgroundColor: 'currentColor',
      },
    },
  });
  
  const PrettoSlider = styled(Slider)({
    color: '#52af77',
    height: 8,
    '& .MuiSlider-thumb': {
      height: 24,
      width: 24,
      backgroundColor: '#fff',
      border: '2px solid currentColor',
      marginTop: -8,
      marginLeft: -12,
      '&:focus, &:hover, &.Mui-active': {
        boxShadow: 'inherit',
      },
    },
    '& .MuiSlider-valueLabel': {
      left: 'calc(-50% + 4px)',
    },
    '& .MuiSlider-track': {
      height: 8,
      borderRadius: 4,
    },
    '& .MuiSlider-rail': {
      height: 8,
      borderRadius: 4,
    },
  });
  
  const AirbnbSlider = styled(Slider)({
    color: '#3a8589',
    height: 3,
    padding: '13px 0',
    '& .MuiSlider-thumb': {
      height: 27,
      width: 27,
      backgroundColor: '#fff',
      border: '1px solid currentColor',
      marginTop: -12,
      marginLeft: -13,
      boxShadow: '#ebebeb 0 2px 2px',
      '&:focus, &:hover, &.Mui-active': {
        boxShadow: '#ccc 0 2px 3px 1px',
      },
      '& .bar': {
        // display: inline-block !important;
        height: 9,
        width: 1,
        backgroundColor: 'currentColor',
        marginLeft: 1,
        marginRight: 1,
      },
    },
    '& .MuiSlider-track': {
      height: 3,
    },
    '& .MuiSlider-rail': {
      color: '#d8d8d8',
      opacity: 1,
      height: 3,
    },
  });
  
  function AirbnbThumbComponent(props) {
    return (
      <SliderThumb {...props}>
        <span className="bar" />
        <span className="bar" />
        <span className="bar" />
      </SliderThumb>
    );
  }
  
  export default function CustomizedSlider() {
    return (
      <Root>
        <Typography gutterBottom>iOS</Typography>
        <IOSSlider
          aria-label="ios slider"
          defaultValue={60}
          marks={marks}
          valueLabelDisplay="on"
        />
        <Separator />
        <Typography gutterBottom>pretto.fr</Typography>
        <PrettoSlider
          valueLabelDisplay="auto"
          aria-label="pretto slider"
          defaultValue={20}
        />
        <Separator />
        <Typography gutterBottom>Tooltip value label</Typography>
        <Slider
          components={{
            ValueLabel: ValueLabelComponent,
          }}
          aria-label="custom thumb label"
          defaultValue={20}
        />
        <Separator />
        <Typography gutterBottom>Airbnb</Typography>
        <AirbnbSlider
          components={{ Thumb: AirbnbThumbComponent }}
          getAriaLabel={(index) =>
            index === 0 ? 'Minimum price' : 'Maximum price'
          }
          defaultValue={[20, 40]}
        />
      </Root>
    );
  }
  