Range Slider Event Handler Javascript

Je vais essayer d'obtenir un curseur de plage de travailler mais je ne peux pas.
Comment puis-je ajouter un gestionnaire d'événements ainsi, lorsque l'utilisateur choisit une valeur de mon code qui lit la valeur. Droit maintenant, sa valeur est toujours 1.

Je voudrais le faire à l'aide de 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

source d'informationauteur kalpetros

html javascript

Seule Lecture

Le problème, c'est que vous êtes seulement à la lecture de la valeur une fois (au démarrage), au lieu de le lire à chaque fois que l'événement se produit:

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

Vous devriez être à la lecture de la valeur dans le gestionnaire à la place:

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");
    }
}

Ou de réécrire votre code:

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");
    }
}

Mise à jour rangevalue

Aussi, il semble que vous voulez mettre à jour l'élément de sortie avec la valeur de la plage. Ce que vous êtes en train de faire est de parler à l'élément par son id:

onchange="rangevalue.value=value"

Cependant, autant que je sache, ce n'est pas un comportement standard; vous ne pouvez pas se référer à des éléments par leur seul id, vous avez pour récupérer l'élément, puis définissez la valeur via le DOM.

Pourrais-je vous suggérer que vous ajoutez un changement écouteur via javascript:

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

Bien sûr, vous aurez à mettre à jour le code à utiliser addEventListener ou attachEvent selon les navigateurs que vous souhaitez soutenir; c'est là que JQuery devient vraiment utile.

Utiliser le mouseup événement.

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

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

DÉMO: http://jsfiddle.net/ZnYjY/1

2

Vous pouvez également utiliser les Formulaires oninput méthode:
```
<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>
```
Ce qui a un avantage sur onclick/onmouseup parce qu'il traite le cas où le curseur est déplacé à l'aide du clavier (onglet à l'entrée et utilisez les touches fléchées)

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

Vous devez vous connecter pour publier un commentaire.