时间戳

首页 > 解决方案 > 如何使 HTML 范围输入仅在滑动时起作用？

javascript - 如何使 HTML 范围输入仅在滑动时起作用？

问题描述

我正在尝试将范围输入用于三态开关（只能通过滑动控制头来更改）。我已经对范围滑块中的开关进行了所需的调整。但是我必须删除范围输入的点击/触摸动作来改变它的值（我只需要在开关上滑动手势而不是点击来改变控制）。非常欢迎任何帮助/建议。这是我尝试过的代码。

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">

标签： javascripthtmlcss

解决方案

这是一个CSS解决方案。您可以使用pointer-events:none来input[type="range"]阻止点击/触摸，然后设置pointer-events:all为input[type="range"]::-webkit-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">

推荐阅读