<div class="circle">
  <div class="debug">
    <input type="number" value="1000" step="1000">
  </div>
  <div class="dot"></div>
</div>

*, *:before, *:after {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  background-color: #ecf0f1;
}

.debug {
  margin: 110px auto;
  width:100%;
  text-align: center;
  position: relative;
  z-index: 5;
  input{
    display: inline-block;
    font-size: 30px;
    width: 120px;
    background: transparent;
    color: #4379FF;
    text-align:center;
    font-family: monospace;
  }
  &:before{
    content:'$';
    display:inline-block;
    font-size: 30px;
    color: #4379FF;
    width:30px;
    font-family: monospace;
  }
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  background: linear-gradient(145deg, #d4d8d9, #fdffff);
  border-radius: 100%;
  box-shadow:  20px 20px 60px #c9cccd;
  width: 250px;
  height: 0;
  padding-bottom: 250px;
  transform: translate3d(-50%, -50%, 0);
  &:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    background-color: #ecf0f1;
    box-shadow: -20px -20px 60px #ffffff;
    border-radius: 50%;
    top: 5%;
    left: 5%;
  }
  .dot {
    position: absolute;
    //background-color: green;
    width: 5%;
    height: 50%;
    left: 47.5%;
    top: 0;
    transform: rotate(0deg);
    transform-origin: center bottom;
    &:before {
      content: "";
      position: absolute;
      background-color: #F05D5D;
      box-shadow: 0 0 20px 10px rgba(0,0,0,.1);
      width: 200%;
      transform: translate3d(-25%, -25%, 0);
      height: 0;
      padding-bottom: 200%;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}

$(document).ready(function(){
  var is_dragging = false;
  $(document).on("mousedown touchstart",".circle",function(e){
    is_dragging = true;
  });
  $(document).on("mouseup touchend",function(e){
    is_dragging = false;
  });
  $(document).on("mousemove touchmove",function(e){
    if(is_dragging){
      var circle = $(".circle")
      var touch = undefined;
      if (e.originalEvent.touches){
        var touch = e.originalEvent.touches[0];
      }
      var center_x = ($(circle).outerWidth() / 2) + $(circle).offset().left;
      var center_y = ($(circle).outerHeight() / 2) + $(circle).offset().top;
      var pos_x = (e.pageX || touch.pageX);
      var pos_y = (e.pageY || touch.pageY);
      var delta_y =  center_y - pos_y;
      var delta_x = center_x - pos_x;
      var angle = Math.atan2(delta_y, delta_x) * (180 / Math.PI);
      angle -= 90;
      if (angle < 0){
        angle = 360 + angle;
      }
      angle = Math.round(angle);
      $(".dot").css("transform", "rotate("+angle+"deg)");
      $(".debug input").val(Math.round(angle * 300000/360));
    }
  });
  $(".debug input").on('change',function(){
    angle = $(this).val()/300000*360;
    $(".dot").css("transform", "rotate("+angle+"deg)");
  })
});