自定义输入范围滑块在输入后卡住

Question

我正在尝试使用可以指示价格范围的输入类型 = 范围滑块。我也想这样做，所以我可以在每个选项上打勾，但我想这是另一个问题。

到目前为止，我已经能够创建并稍微设置滑块以及 CSS 和 JS 的样式，使其自动更新以填充其背后的背景并输出。

但是，现在根据 if 语句更改输出后，它会完全按照我想要的方式更新！一次......然后它中断并且不允许任何更新。 （我确定问题出在我的 if 语句函数 oninput 中）

我做错了什么？

var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = '200k-';


slider.oninput = function() {
  if (this.value = 0) {
    output.innerHTML = '200k-';
  } else if (this.value = 1) {
    output.innerHTML = '200k-400k';
  } else if (this.value = 2) {
    output.innerHTML = '400k-600k';
  } else if (this.value = 3) {
    output.innerHTML = '600k-800k';
  } else if (this.value = 4) {
    output.innerHTML = '800k-1m';
  } else if (this.value = 5) {
    output.innerHTML = '1m-2m';
  } else if (this.value = 6) {
    output.innerHTML = '2m+';
  }
}

var start_value = slider.getAttribute("value");

var x = start_value;
var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';
slider.style.background = color;

slider.addEventListener("mousemove", function() {
  x = slider.value;
  color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';
  slider.style.background = color;
});

.main {
  width: 1000px;
  background-color: #888;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  border: 5px solid rgb(117, 252, 117);
}

h1 {
  align-self: center;
  font-size: 2em;
  font-weight: 900;
}

p {
  opacity: 0.7;
  font-size: 2em;
  font-weight: 900;
}

p span {
  color: rgb(117, 252, 117);
}

.slideContainer {
  width: 75%;
  align-self: center;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  margin-bottom: 50px;
  background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 12px;
  box-shadow: 0px 1px 10px 1px black;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 35px;
  height: 35px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

<div class="main">
  <h1>Worth?</h1>
  <div class="slideContainer">
    <p>Value: <span id="value"></span></p>
    <input type="range" min="0" max="6" value="0" class="slider" id="myRange">
  </div>
</div>

Answer 1

您必须使用双等号 (==) 运算符来比较这些值。单个等号用于将值分配给左侧。

  if (this.value == 0) {
    output.innerHTML = '';
  } else if (this.value == 1) {
    output.innerHTML = '200k-400k';
  } else if (this.value == 2) {
    output.innerHTML = '400k-600k';
  } else if (this.value == 3) {
    output.innerHTML = '600k-800k';
  } else if (this.value == 4) {
    output.innerHTML = '800k-1m';
  } else if (this.value == 5) {
    output.innerHTML = '1m-2m';
  } else if (this.value == 6) {
    output.innerHTML = '2m+';
  }
}

完整代码：

var slider = document.getElementById("myRange");
var output = document.getElementById("value");


slider.oninput = function() {

  if (this.value == 0) {
    output.innerHTML = '';
  } else if (this.value == 1) {
    output.innerHTML = '200k-400k';
  } else if (this.value == 2) {
    output.innerHTML = '400k-600k';
  } else if (this.value == 3) {
    output.innerHTML = '600k-800k';
  } else if (this.value == 4) {
    output.innerHTML = '800k-1m';
  } else if (this.value == 5) {
    output.innerHTML = '1m-2m';
  } else if (this.value == 6) {
    output.innerHTML = '2m+';
  }
}

var start_value = slider.getAttribute("value");

var x = start_value;
var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';
slider.style.background = color;

slider.addEventListener("mousemove", function() {
  x = slider.value;
  color = 'linear-gradient(90deg, rgb(117, 252, 117)' + (100 / 6) * x + '% , rgb(214, 214, 214)' + (100 / 6) * x + '%)';
  slider.style.background = color;
});

.main {
  width: 1000px;
  background-color: #888;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  border: 5px solid rgb(117, 252, 117);
}

h1 {
  align-self: center;
  font-size: 2em;
  font-weight: 900;
}

p {
  opacity: 0.7;
  font-size: 2em;
  font-weight: 900;
}

p span {
  color: rgb(117, 252, 117);
}

.slideContainer {
  width: 75%;
  align-self: center;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  margin-bottom: 50px;
  background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 12px;
  box-shadow: 0px 1px 10px 1px black;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 35px;
  height: 35px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

<div class="main">
  <h1>Worth?</h1>
  <div class="slideContainer">
    <p>Value: <span id="value"></span></p>
    <input type="range" min="0" max="6" value="0" class="slider" id="myRange">
  </div>
</div>