dragdealer circle

by abenrob

HTML

<script src="https://rawgit.com/skidding/dragdealer/master/src/dragdealer.js"></script>
<script src="https://cdn.rawgit.com/skidding/dragdealer/master/src/dragdealer.js"></script>
<div id="slider" class="dragdealer">
  <div class="handle">
    <span class="value"></span>
  </div>
</div>

CSS

body {font-family: sans-serif;}

#slider {position: relative; height: 30px;}

#slider .handle {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: #70BC7A;
  color: #FFF;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  border-radius: 15px;
}

#slider:after {
  content: "";
  position: absolute;
  margin-top: 13px;
  height: 4px;
  background: rgba(0, 0, 0, .5);
  border-radius: 2px;
  left: 0;
  right: 0;
  z-index: -1;
}

JavaScript

new Dragdealer('slider', {
  animationCallback: function(x, y) {
    var sliderValue = Math.round(x * 59) + 1;
    // set handle value
    $('#slider .value').text(sliderValue);
  }
});