Je suis en train de créer un site Web sur lequel je veux utiliser le curseur de plage (je sais qu’il ne prend en charge que les navigateurs Webkit).
Je l'ai complètement intégré et fonctionne bien. Mais j'aimerais utiliser une zone de texte pour afficher la valeur de la diapositive actuelle.
Je veux dire que si initialement le curseur est à la valeur 5, dans la zone de texte, il doit afficher 5, lorsque je glisse la valeur dans la zone de texte doit changer.
Puis-je faire cela en utilisant uniquement CSS ou HTML. Je veux éviter JQuery. C'est possible?
Cela utilise javascript, pas jquery directement. Cela pourrait vous aider à démarrer.
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
Pour ceux qui recherchent encore une solution sans code javascript séparé. Il n’ya guère de solution facile sans écrire une fonction javascript ou jquery:
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value">
<output name="ageOutputName" id="ageOutputId">24</output>
</form>
Si vous souhaitez afficher la valeur dans une zone de texte, modifiez simplement la sortie en entrée.
Mettre à jour:
C'est toujours du Javascript écrit dans votre html, vous pouvez remplacer le liaisons avec code JS ci-dessous:
document.registrationForm.ageInputId.oninput = function(){
document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;
}
Utilisez l'identifiant ou le nom de l'élément, les deux sont pris en charge dans les navigateurs classiques.
version avec entrée modifiable:
<form>
<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />
</form>
une méthode encore meilleure serait d’accepter l’événement d’entrée sur l’entrée elle-même .__
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
oninput="amount.value=rangeInput.value">
<output id="amount" name="amount" for="rangeInput">0</output>
Voici un violon (avec la variable id
ajoutée conformément au commentaire de Ryan).
Si vous souhaitez que votre valeur actuelle soit affichée sous le curseur et se déplace avec, essayez ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MySliderValue</title>
</head>
<body>
<h1>MySliderValue</h1>
<div style="position:relative; margin:auto; width:90%">
<span style="position:absolute; color:red; border:1px solid blue; min-width:100px;">
<span id="myValue"></span>
</span>
<input type="range" id="myRange" max="1000" min="0" style="width:80%">
</div>
<script type="text/javascript" charset="utf-8">
var myRange = document.querySelector('#myRange');
var myValue = document.querySelector('#myValue');
var myUnits = 'myUnits';
var off = myRange.offsetWidth / (parseInt(myRange.max) - parseInt(myRange.min));
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth / 2);
myValue.parentElement.style.left = px + 'px';
myValue.parentElement.style.top = myRange.offsetHeight + 'px';
myValue.innerHTML = myRange.value + ' ' + myUnits;
myRange.oninput =function(){
let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth / 2);
myValue.innerHTML = myRange.value + ' ' + myUnits;
myValue.parentElement.style.left = px + 'px';
};
</script>
</body>
</html>
Notez que ce type d'élément d'entrée HTML possède une fonctionnalité masquée, par exemple vous pouvez déplacer le curseur avec les touches de direction gauche/droite/bas/haut lorsque l'élément est actif. Même chose avec les clés Home/End/PageDown/PageUp.
Si vous utilisez plusieurs diapositives et que vous pouvez utiliser jQuery, vous pouvez procéder comme suit pour gérer facilement plusieurs curseurs:
function updateRangeInput(elem) {
$(elem).next().val($(elem).val());
}
input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; }
input[type=text] { width: 100px; }
input[type=range] { width: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0">
<input type="text" value="0">
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50">
<input type="text" value="50">
De plus, en utilisant oninput
sur le <input type='range'>
, vous recevrez des événements tout en faisant glisser la plage.
<form name="registrationForm">
<input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value">
<input type="text" name="ageOutputName" id="ageOutputId"></input>
</form>
J'ai une solution qui implique (Vanilla) JavaScript, mais uniquement en tant que bibliothèque. Vous devez l'inclure une fois, puis il vous suffit de définir l'attribut source
approprié des entrées numériques.
L'attribut source
doit être le sélecteur querySelectorAll
de l'entrée de plage que vous souhaitez écouter.
Cela fonctionne même avec selectcs. Et cela fonctionne avec plusieurs auditeurs. Et cela fonctionne dans l'autre sens: changez le nombre et l'entrée de la plage sera ajustée. Et cela fonctionnera avec les éléments ajoutés plus tard sur la page (vérifiez https://codepen.io/HerrSerker/pen/JzaVQg pour cela)
Testé sous Chrome, Firefox, Edge et IE11
;(function(){
function emit(target, name) {
var event
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(name, true, true);
} else {
event = document.createEventObject();
event.eventType = name;
}
event.eventName = name;
if (document.createEvent) {
target.dispatchEvent(event);
} else {
target.fireEvent("on" + event.eventType, event);
}
}
var outputsSelector = "input[type=number][source],select[source]";
function onChange(e) {
var outputs = document.querySelectorAll(outputsSelector)
for (var index = 0; index < outputs.length; index++) {
var item = outputs[index]
var source = document.querySelector(item.getAttribute('source'));
if (source) {
if (item === e.target) {
source.value = item.value
emit(source, 'input')
emit(source, 'change')
}
if (source === e.target) {
item.value = source.value
}
}
}
}
document.addEventListener('change', onChange)
document.addEventListener('input', onChange)
}());
<div id="div">
<input name="example" type="range" max="2250000" min="-200000" value="0" step="50000">
<input id="example-value" type="number" max="2250000" min="-200000" value="0" step="50000" source="[name=example]">
<br>
<input name="example2" type="range" max="2240000" min="-160000" value="0" step="50000">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<input type="number" max="2240000" min="-160000" value="0" step="50000" source="[name=example2]">
<br>
<input name="example3" type="range" max="20" min="0" value="10" step="1">
<select source="[name=example3]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
<br>
</div>
<br>