Bande mobile qui continue de changer de valeur

Question

Je dois créer une bande mobile (je ne sais pas comment l'appeler) sur mon site Web. Quelque chose comme ceci:

|--@---------| 

Et le @ peut être déplacé par l'utilisateur d'un côté à l'autre et lorsque la barre est cliqué, il envoie la valeur mais il ne peut pas être fait avec des demandes manuelles afin que l'utilisateur choisit la valeur à envoyer. J'ai juste besoin de quelques conseils pour pouvoir faire ça. Je pense que cela peut être fait par flash, mais je ne sais même pas ce que je devrais utiliser les mots-clés de recherche sur Internet devrait être utilisé pour trouver plus d'informations à ce sujet.

Answer 1

Comme Wainage suggéré, un <input> avec le type range est peut-être une solution simple. Voir un exemple ci-dessous.

document.addEventListener('DOMContentLoaded', function() { 
 
    var slider = document.getElementById('rangeValue'); 
 
    var output = document.getElementById('valueOutput'); 
 

 
    function updateOutput() { 
 
     output.innerHTML = slider.value; 
 
    } 
 

 
    //set the value initially 
 
    updateOutput(); 
 

 
    //subscribe to any change/drag - not supported by IE 
 
    slider.addEventListener('input', updateOutput); 
 

 
    //use change event for updates when drag is ended 
 
    slider.addEventListener('change', updateOutput); 
 
});

<input id="rangeValue" type="range" name="rangeValue" value="3" max="10" /> 
 
<div>Value: <span id="valueOutput"></span></div>