Обработчик событий слайдера диапазона Javascript

Я пытаюсь заставить слайдер диапазона работать, но я не могу. Как добавить обработчик событий, когда пользователь выбирает значение, которое мой код считывает это значение. Сейчас его значение всегда 1.

Я хотел бы сделать это, используя чистый Javascript.

HTML:

<div id="slider">
    <input class="bar" type="range" id="rangeinput" min="1" max="25" value="1" onchange="rangevalue.value=value"/>
    <span class="highlight"></span>
    <output id="rangevalue">1</output>
</div>

JAVASCRIPT:

var rangeInput = document.getElementById("rangeinput").value;
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    if (rangeInput > 0 && rangeInput < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

JSFIDDLE

Ответы

Ответ 1

Single Read

Проблема в том, что вы только читаете значение один раз (при запуске), а не читаете его каждый раз, когда происходит событие:

// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;

Вместо этого вы должны прочитать значение в обработчике:

function testtest(e) {
    // read the value from the slider:
    var value = document.getElementById("rangeinput").value;
    // now compare:
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

Или переписать код:

var rangeInput = document.getElementById("rangeinput");
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    var value = rangeInput.value;
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

Обновление диапазона значений

Также похоже, что вы хотите обновить выходной элемент со значением диапазона. То, что вы сейчас делаете, относится к элементу по id:

onchange="rangevalue.value=value"

Однако, насколько я знаю, это не стандартное поведение; вы не можете ссылаться на элементы только по их идентификатору; вам необходимо извлечь элемент, а затем установить значение через DOM.

Могу ли я предложить добавить слушателя изменений через javascript:

rangeInput.addEventListener("change", function() {
    document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);

Конечно, вам нужно будет обновить код для использования addEventListener или attachEvent в зависимости от браузеров, которые вы хотите поддерживать; здесь JQuery действительно становится полезным.

Ответ 2

Используйте для этого событие mouseup.

var rangeInput = document.getElementById("rangeinput");

rangeInput.addEventListener('mouseup', function() {
    if (this.value > 0 && this.value < 5) {
        alert("First");
    } else{
        alert("Second");
    }
});

DEMO: http://jsfiddle.net/ZnYjY/1

Ответ 3

Вы также можете использовать метод FORMs oninput:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" />100 +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

У этого есть преимущество перед onclick/onmouseup, потому что он обрабатывает случай, когда ползунок перемещается с помощью клавиатуры (вкладка на вход и использование клавиш со стрелками)

Ответ 4

<script type="text/javascript">
    function range()
    {
//the simplest way i found
    var p = document.getElementById('weight');
    var res = document.getElementById('rangeval');
    res.innerHTML=p.value+ " Lbs";
    }
</script>

  <label for="weight">Your weight in lbs:</label>
  <input name="weight" type="range" id="weight" max="500" min="0" value="75" onChange="range()" onKeyUp="range()">
  <span id="rangeval"></span>