Slider Demo - draggable - touch enabled

This uses the Interact.js library

by Ben Clayton

HTML

<script src="//flowcms-bc.v11002.infxlocal/script/interact/interact-1.2.3.js"></script>
<div id="track">
<div id="drag-me" class="draggable"></div>
</div>
http://interactjs.io/

CSS

#drag-me {
  position:relative;
  width: 45px;
  height:65px;
  margin: 0;
  top:-30px;
  background-color: #eee;

  border: solid 1px #666;
  border-radius: 6px;

  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}

#track {
  margin:80px;
  width: 250px;
  height:7px;
  border: solid 1px #666;
  border-radius: 0.75em;
  background-color:#eee;
}

JavaScript

interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "#track"
    },

    // call this function on every dragmove event
    onmove: function (event) {
      var target = event.target,
          // keep the dragged position in the data-x/data-y attributes
          x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
          y = (parseFloat(target.getAttribute('data-y')) || 0) ;
      //+ event.dy;
      // translate the element
      target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
   
      // update the position attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    },
    // call this function on every dragend event
    onend: function (event) {
      var target = event.target,
      x = parseFloat(target.getAttribute('data-x')) || 0;
      y = parseFloat(target.getAttribute('data-y')) || 0;
 
       // x = parseInt( 0.5 + x/60,10)*60;
       target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';
      target.setAttribute('data-x', x);
      alert(x);
    }
  });