JSFiddle - React, Tailwind, and code Playground

by morganney

HTML

<script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<div id="root">

</div>

CSS

#root {
  height: 1000px;
  padding-top: 100px;
}
.wrapper {
  padding: 20px;
}

.slider {
  margin-bottom: 50px;
}

Babel + JSX

const { Slider } = MaterialUI
const { useState, useRef, useLayoutEffect, useMemo } = React


const SliderComponent = ({
	delta = 50
}) => {
  const ref = useRef(null)
  const [value, setValue] = useState(0)
  const [startY, setStartY] = useState(0)
  const debouncedOnChange = useMemo(() => {
    return _.debounce((evt, value) => {
      if (evt instanceof MouseEvent) {
        setValue(value)
      }
    }, 25)
  }, [])
 
  useLayoutEffect(() => {
  	if (ref.current) {
      ref.current.addEventListener('touchstart', evt => {
        setStartY(evt.changedTouches[0].pageY)
      })
    }
  }, [])
  
	return (
  	<Slider
      ref={ref}
      value={value}
      onChange={debouncedOnChange}
      onChangeCommitted={(evt, value) => {
        if (evt instanceof TouchEvent) {
          if (Math.abs(startY - evt.changedTouches[0].pageY) < delta) {
            setValue(value)
          }
        } else {
          setValue(value)
        }
      }}
    />
  )
}

const App = () => {
  return (
    <div className="wrapper">
      <div className="slider">
        <SliderComponent />
      </div>
      <div className="slider">
        <SliderComponent />
      </div>
      <div className="slider">
        <SliderComponent />
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))