How to make HTML range input's to work only on sliding?

Question

I am trying to use a range input for a tri state switch(which can only be changed via sliding the control head). I have made the adjustments required for the switch in the range slider. But I have to remove the range input's tap/touch action to change it's value(I need only swipe gesture on the switch not a tap to change control). Any help/suggestion is most welcome. Here's the code I have tried.

function showVal(value){
	console.log("input value:"+Number(value));
	if(value == 0){
		console.log("cancel selected");
	}
	else if(value == 100){
		console.log("ok selected");
	}

}
document.querySelector("input[type=\"range\"]").ontouchend = function() {
		// clearInterval(document.init);
		var value = Number(this.value);
		if(value>98){
			console.log("ok selected");
			document.getElementById("rangeElement").disabled = true;
			return;
		}else if(value<2){
			console.log("cancel selected");
			document.getElementById("rangeElement").disabled = true;
			return;
		}else{
			//console.log("reset");
			if(value >=50){
				var rangeAnimIntervel = setInterval(function() {
						document.querySelector("input[type=\"range\"]").value = value--;
						if(value == 50){
							clearInterval(rangeAnimaIntervel); 
							return;
						}
				}, 1);
			}else{
				var rangeAnimIntervel = setInterval(function() {
						document.querySelector("input[type=\"range\"]").value = value++;
						if(value == 50){
							clearInterval(rangeAnimaIntervel); 
							return;
						} 
				}, 1);
			}

		}
}

body {
  background: #eee;
}

input[type="range"] {
    width: 320px;
    margin: 100px;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(#1f1f1f));
    -webkit-appearance: none;
    border-radius: 10px;
    padding: 5px;
    transition: opacity 0.5s;
    position: relative;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 10px;
    background: -webkit-linear-gradient(top, #fafafa 0%,#dedede 50%,#cfcfcf 51%,#a3a3a3 100%);
    z-index: 1;
    width: 75px;
    position: relative;
    height: 50px;
}

input[type="range"]:before {
    content: "Swipe either way";
    color: #8a8a8a;
    position: absolute;
    left: 0px;
    top: 10px;
    width: 100%;
    z-index: 1;
    font-size: 32px;
}

input[type="range"]::-webkit-slider-thumb:before {
    color: #8a8a8a;
    position: absolute;
    left: 5px;
    top: -10px;
    z-index: 1;
    font-size: 56px;
    font-weight: bold;
    content: "→";
}

<input id="rangeElement" type="range" class="swipe-either-way" oninput="showVal(this.value)" value="50" max="100">

Answer 1

Here is a css solution. You can use pointer-events:none to the input[type="range"] to prevent the tap/touch and then set pointer-events:all to the input[type="range"]::-webkit-slider-thumb to allow the tap and touch to work on slider thumb

function showVal(value) {
  //console.log("input value:" + Number(value));
  if (value == 0) {
    console.log("cancel selected");
  } else if (value == 100) {
    console.log("ok selected");
  }

}
document.querySelector("input[type=\"range\"]").ontouchend = function() {
  // clearInterval(document.init);
  var value = Number(this.value);
  if (value > 98) {
    console.log("ok selected");
    document.getElementById("rangeElement").disabled = true;
    return;
  } else if (value < 2) {
    console.log("cancel selected");
    document.getElementById("rangeElement").disabled = true;
    return;
  } else {
    //console.log("reset");
    if (value >= 50) {
      var rangeAnimIntervel = setInterval(function() {
        document.querySelector("input[type=\"range\"]").value = value--;
        if (value == 50) {
          clearInterval(rangeAnimaIntervel);
          return;
        }
      }, 1);
    } else {
      var rangeAnimIntervel = setInterval(function() {
        document.querySelector("input[type=\"range\"]").value = value++;
        if (value == 50) {
          clearInterval(rangeAnimaIntervel);
          return;
        }
      }, 1);
    }

  }
}

body {
  background: #eee;
}

input[type="range"] {
  width: 320px;
  margin: 100px;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000), to(#1f1f1f));
  -webkit-appearance: none;
  border-radius: 10px;
  padding: 5px;
  transition: opacity 0.5s;
  position: relative;
  pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 10px;
  background: -webkit-linear-gradient(top, #fafafa 0%, #dedede 50%, #cfcfcf 51%, #a3a3a3 100%);
  z-index: 1;
  width: 75px;
  position: relative;
  height: 50px;
  pointer-events: all;
}

input[type="range"]:before {
  content: "Swipe either way";
  color: #8a8a8a;
  position: absolute;
  left: 0px;
  top: 10px;
  width: 100%;
  z-index: 1;
  font-size: 32px;
}

input[type="range"]::-webkit-slider-thumb:before {
  color: #8a8a8a;
  position: absolute;
  left: 5px;
  top: -10px;
  z-index: 1;
  font-size: 56px;
  font-weight: bold;
  content: "→";
}

<input id="rangeElement" type="range" class="swipe-either-way" oninput="showVal(this.value)" value="50" max="100">