title: noUiSlider touch events not working in foundation off-canvas menu
body: <p>I am using noUiSlider in a Foundation 6 off-canvas menu, and the slider handles will not drag on touch devices. It works if the noUiSlider is nested outside of the off-canvas menu, and it even works fine in the off-canvas menu when using a mouse to drag the handles. However when I emulate touch events, or actually attempt to drag the sliders handles on a touch device the slider handles do not move and stay fixed in place.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="off-canvas position-right" id="offCanvasNestedPush" data-content-scroll="false" data-off-canvas&gt;
      &lt;div class="row align-middle" id="fr_wrapper_price_slider" data-initial-start="0" data-initial-end="10000000"&gt;
          &lt;div class="columns small-12"&gt;
              &lt;!-- noUiSlider --&gt;
              &lt;div id="fr_price_slider"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var fr_price_slider_wrapper = document.getElementById('fr_wrapper_price_slider');
  var fr_price_slider = document.getElementById('fr_price_slider');
  noUiSlider.create(fr_price_slider, {
      /* Slider Positions on DOM Load */
      start: [
          fr_price_slider_wrapper.getAttribute('data-initial-start'),
          fr_price_slider_wrapper.getAttribute('data-initial-end')
      ],
      behaviour: 'drag',
      connect: true,
      range: {
          'min': [ 0, 5000 ],
          '50%': [ 1000000, 50000 ],
          'max': [ 10000000 ]
      }
  });
  </code></pre>