8768 sujets

Développement web côté serveur, CMS

Input "Range" Lié à Input "Text"

Bonjour à tous,

Je suis entrain de faire un formulaire de recherche d'annonce pour une agence immobilière et j'aimerais mettre deux input :


<input type="text" id="search_achat_prixMinBien" name="prixMinBien" placeholder=" - Prix mini - ">
<input type="range" id="search_achat_prixMinBien" min="1000" max="1000000">


Qu'il y ai comme on voit partout, un input type="text", qui affiche la valeur minimal et maximale (ici le prix d'une maison) en chiffre, et qu'on puisse voir/modifier soit par l'input text soit en déplaçant la barre de l'input type="range".

Merci d'avance si vous connaissez la solution !
Modifié par ZapZaps (28 Jul 2020 - 14:40)
Modérateur
Bonjour,

On peut par exemple utiliser javascript.

Ci-dessous un exemple qui utilise un input text, un input range, et un input number (on peut se passer de cet input, je l'ai juste ajouté au cas où). Au chargement de la page, on initialise l'input range avec une valeur de 500000, et on propage cette valeur aux autres inputs. Ensuite, dès qu'un utilisateur touche à la valeur d'un des 3 inputs, on modifie la valeur des autres inputs de manière à avoir un prix identique dans les 3 inputs.

Attention aux noms des id des 3 inputs. Ils doivent être différents.

Il faudra sans doute adapter bien sûr !

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input range</title>
<style>
</style>
</head>
<body>
<h1>Input range</h1>
<script>
function propagePrix(id)
{
	var e, v;
	e=document.getElementById(id);
	v=e.value;
	if (id!="search_achat_prixMinBien_text")
		document.getElementById("search_achat_prixMinBien_text").value=v;
	if (id!="search_achat_prixMinBien_number")
		document.getElementById("search_achat_prixMinBien_number").value=v;
	if (id!="search_achat_prixMinBien_range")
		document.getElementById("search_achat_prixMinBien_range").value=v;
}
</script>
<input type="text" id="search_achat_prixMinBien_text" oninput="propagePrix(this.id);" name="prixMinBien" placeholder=" - Prix mini - ">
<input type="number" id="search_achat_prixMinBien_number" oninput="propagePrix(this.id);" min="1000" max="1000000">
<input type="range" id="search_achat_prixMinBien_range" oninput="propagePrix(this.id);" min="1000" max="1000000" value="500000"></body>
<script>
// en option, on peut propager le prix initial du input range au chargement de la page
// pour initialiser les autres inputs
window.addEventListener("load",function(){
		propagePrix("search_achat_prixMinBien_range");
	});
</script>
</html>

Amicalement,
Sujet clos
Aller à