title: Mousemove for mobile
body: <p>I have a website with a splitscreen slider that I want to make mobile friendly. I have an addeventlistener 'mousemove' which allows the slider to go back and forth, but I also want to make it touch activated as well. </p>
  
  <p>I tried replacing the 'mousemove' with 'pointermove' and 'touchmove' but nothing would change. It still won't work on mobile, help please. The <a href="https://codepen.io/GabriellaFarfan/pen/MEzYjr" rel="nofollow noreferrer">codepen</a> shows an example of what I have on my site.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function(){
    let wrapper = document.getElementById('wrapper');
    let topLayer = wrapper.querySelector('.top');
    let handle = wrapper.querySelector('.handle');
    let skew = 0;
    let delta = 0;
    
    if(wrapper.className.indexOf('skewed') != -1){
     skew = 1000;
     }
  
  wrapper.addEventListener('mousemove', function(e){
    delta = (e.clientX - window.innerWidth / 2) * 0.5;
    
    handle.style.left = e.clientX + delta + 'px';
    
    topLayer.style.width= e.clientX + skew + delta + 'px';
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    margin: 0;
    padding:0;
    font-size: 100%;
    line-height: 1.6;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #wrapper{
    position: relative;
    width: 100%;
    min-height:55vw;
    overflow: hidden;
  }
  
  .layer{
    position:absolute;
    width:100vw;
    min-height: 55vw;
    overflow: hidden;
  }
  
  .layer .content-wrap{
    position: absolute;
    width:100vw;
    min-height: 55vw;
  }
  
  .layer .content-body{
    width: 25%;
    position:absolute;
  /*   top:50%; */
    top: 25%;
    text-align: center;
    transform:translateY(-50%);
    color:#fff;
  }
  
  .layer img{
    position:absolute;
    width:65%;
  /*width: 35%    */
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
  
  .layer h1 {
    font-size:2em;
    font-family: 'Lato', sans-serif;
  }
  
  .bottom{
    background:#686965;
    z-index:1;
  }
  
  .bottom .content-body{
    right:5%;
  }
  
  .bottom h1{
    color:#7bbe9a;
    font-family: 'Lato', sans-serif;
  }
  
  .top{
    background:#eff0ec;
    color:#222;
    z-index:2;
    width:50vw;
  }
  
  .top .content-body{
    left:5%;
    color:#333;
  }
  
  .handle{
    position: absolute;
    height: 100%;
    display: block;
    background-color: #7bbe9a;
    width: 5px;
    top:0;
    left: 50%;
    z-index:3;
  }
  
  .skewed .handle{
    top:50%;
    transform:rotate(30deg) translateY(-50%);
    height:200%;
    transform-origin:top;
  }
  
  .skewed .top{
    transform: skew(-30deg);
    margin-left:-1000px;
    width: calc(50vw + 1000px);
  }
  
  .skewed .top .content-wrap{
    transform: skew(30deg);
    margin-left:1000px;
  }
  
  @media(max-width:768px){
    body{
      font-size:75%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Images not Owned by Me --&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href=""&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;section id="wrapper" class="skewed"&gt;
        &lt;div class="layer bottom"&gt;
          &lt;div class="content-wrap"&gt;
            &lt;div class="content-body"&gt;
              &lt;h1&gt;Designer&lt;/h1&gt;
  &lt;!--             &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; --&gt;
            &lt;/div&gt;
            
            &lt;img src="http://3d.ford.com/assets/ford_gt-min.png" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="layer top"&gt;
          &lt;div class="content-wrap"&gt;
            &lt;div class="content-body"&gt;
              &lt;h1&gt;Developer&lt;/h1&gt;
  &lt;!--             &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt; --&gt;
            &lt;/div&gt;
            
            &lt;img src="http://3d.ford.com/assets/ford_gt_print.png" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class="handle"&gt;&lt;/div&gt;
      &lt;/section&gt;
      
      &lt;script src=""&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>