Пользовательский ползунок диапазона ввода застревает после ввода - PullRequest
Новая
       33

Пользовательский ползунок диапазона ввода застревает после ввода

0 голосов
/ 27 марта 2020

Я пытаюсь использовать ползунок типа type = range, который может указывать диапазон цен. Я также хотел сделать так, чтобы у меня были галочки для каждого варианта, но я думаю, что это для другого вопроса.

До сих пор я был в состоянии создать и немного стилизовать свой слайдер и CSS и JS, чтобы он автоматически обновлялся, заполняя фон за ним, и выводил.

Однако теперь, после изменения выходных данных, основанного на операторе if, он обновляется именно так, как я хочу! Один раз .... Тогда он ломается и не позволяет больше обновлений. (Я уверен, что проблема в моей функции оператора ifinput)

Что я делаю не так? 

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>

1 Ответ

0 голосов
/ 27 марта 2020

Вы должны использовать оператор двойного равенства (==) для сравнения значений. Одинарные равенства используются для присвоения значений левой стороне. 

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