SOURCE

$('#c').on('touchstart', function(e){
  console.log('touchstart', e);
});

let now = 0, i=true, jd = 0,jdn=0;
$('#c').on('touchmove', function(e){
  console.log('touchmove', e);
  let x = e.targetTouches[0].pageX
  if (i) {
    i=false;
    now = x;
    return;
  }
  let num = x-now;
	num = num / 200 * 100;
  jdn = jd + num;
  if (jdn<0)  jdn=0;
  if (jdn>100)jdn=100;
  $('#b').width(jdn+'%');
  console.log(jdn,x,now,num);
  
  $('#t').html(jdn+'%');
});

$('#c').on('touchend', function(e){
  console.log('touchend', e);
  i = true;
  jd = jdn;
});

//touchmove

//touchend 

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>


<div class="a" id="a">
  <div class="b" id="b">
    <div class="c" id="c"></div>
  </div>
</div>
<div id="t"></div>

.a {
  width: 200px;
    height: 5px;
  background-color:#000;
}
.b {
  float:left;
  
    height: 5px;
  background-color:red;
  position:relative;
}
.c {
  width: 21px;
  height: 21px;
  position:absolute;
  border-radius:50px;
  right: -10px;
  bottom: -8px;
  z-index: 9999;
  background-color: #999;
}
body {
  padding:50px;
}