interface Web
tutoriel CSS
Comment créer un curseur de plage personnalisé en utilisant CSS et JavaScript ?
Comment créer un curseur de plage personnalisé en utilisant CSS et JavaScript ?
Range Slider est un champ de saisie en HTML qui accepte le type "Plage". Il est utilisé pour sélectionner une valeur numérique en fonction d'une plage spécifique, nous pouvons transmettre la plage dans le champ de saisie comme indiqué dans l'extrait de code suivant
<input type = “range” min = “0” max = “100”/>
Comme vous pouvez le voir dans l'extrait ci-dessus, tapez égal à plage et nous fournissons les valeurs min="0" et max="100" qui seront la plage du champ.
Curseur de plage personnalisé permet de personnaliser la plage de champ selon vos besoins.
Dans l'article suivant, apprenons comment créer un curseur de plage personnalisé à l'aide de CSS et JavaScript.
Créons des fichiers séparés pour chaque langue -
Utilisez l'événement oninput()
L'événementoninput est un événement HTML utilisé pour effectuer une action immédiatement lorsque l'utilisateur saisit une valeur dans un champ de saisie. Voici l'extrait de code qui utilise cet événement -
<input type = ‘’ oninput = ‘event name()’>
Ce qui suit est une explication du code ci-dessous -
Fichier HTML (index.html)
Il s'agit d'un fichier HTML et doit être enregistré avec l'extension .html. Dans ce fichier, nous allons créer un champ de plage de saisie qui sera notre curseur de plage personnalisé et à l'intérieur du champ de saisie, nous définirons la plage. Et créez une balise span pour afficher la valeur du curseur de plage personnalisée.
Ce qui suit est le code HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
</head>
<body>
<h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
<span id = 'res'></span>
</div>
</body>
</html>
Fichier CSS (style.css)
Il s'agit d'un fichier CSS créé avec l'extension .css. En utilisant CSS, nous gérerons le style de nos pages HTML.
Ce qui suit est un extrait de code qui connecte les fichiers CSS aux fichiers HTML -
<link rel="stylesheet" href="index.css">
Ce qui suit est le code CSS -
style.css
span{
position: relative;
top: 20px;
left: 20px;
font-size: 30px;
font-weight: 700;
}
p{
position: relative;
left: 10px;
font-size: 20px;
}
input[type='range']
{
-webkit-appearance: none;
width: 400px;
height: 30px;
background-color: black;
border-radius: 60px;
}
#slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 50px;
height: 50px;
border-radius: 40px;
appearance: none;
cursor: pointer;
background-color: blue;
}
Fichier JavaScript (index.js)
Il s'agit d'un fichier JavaScript qui doit être enregistré avec une extension .js. En JavaScript, nous allons écrire un programme pour obtenir la valeur de la plage d'entrée et l'afficher à l'utilisateur à l'aide de l'attribut innerHTML.
Voici l'extrait de code pour connecter un fichier JavaScript avec un fichier HTML -
<script src = ‘index.html’>
REMARQUE - Au lieu de créer trois extensions de fichier distinctes pour HTML, CCS et JavaScript, vous pouvez simplement créer un fichier HTML avec .html et écrire dans la balise au-dessus du code CSS de la balise body, écrire le code JavaScript à à la fin de la balise body ou dans la balise <script></script> à l'intérieur de la balise head. < /p>
Ce qui suit est le programme JavaScript
index.js
function Range() {
//fetch the input range value through its id
let range_value = document.getElementById('slider');
//fetch the span tag through its id
let result = document.getElementById('res');
//show the value using innerHTML property
res.innerHTML = "Range value is: " + range_value.value;
}
Exemple
Exécutez le HTML, CSS et JavaScript ci-dessus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
<style>
span{
position: relative;
top: 20px;
left: 20px;
font-size: 30px;
font-weight: 700;
}
p{
position: relative;
left: 10px;
font-size: 20px;
}
input[type='range']
{
-webkit-appearance: none;
width: 400px;
height: 30px;
background-color: black;
border-radius: 60px;
}
#slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 50px;
height: 50px;
border-radius: 40px;
appearance: none;
cursor: pointer;
background-color: blue;
}
</style>
</head>
<body>
<h1>Custom Range Sliders with HTML, CSS and JavaScript</h1>
<script>
function Range()
{
//fetch the input range value through its id
let range_value = document.getElementById('slider');
//fetch the span tag through its id
let result = document.getElementById('res');
//show the value using innerHTML property
res.innerHTML = "Range value is: " + range_value.value;
}
</script>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" oninput="Range()" id = 'slider' title = 'range'><br>
<span id = 'res'></span>
</div>
</body>
</html>
Comme vous pouvez le voir dans le programme ci-dessus, nous utilisons HTML, CSS et JavaScript pour créer un curseur de plage personnalisé.
En utilisant HTML, nous créons le contenu de la page. Nous créons d'abord un champ de saisie qui accepte une plage comme type et transmettons une valeur minimale égale à 1 et une valeur maximale égale à 100 à l'intérieur du champ de saisie comme indiqué ci-dessous -
<input type = ‘range’ min = ‘1’ max = ‘100’ oninput = ‘eventname()’>
Plus tard, nous créons un événement oninput comme indiqué dans l'extrait de code ci-dessus, l'événement oninput est utilisé pour calculer la valeur lorsque l'utilisateur saisit une valeur dans le champ de saisie. Ensuite, nous obtenons la valeur de la plage d'entrée par son identifiant comme indiqué ci-dessous -
let range_value = document.getElementById('slider');
Nous obtenons la balise span et via l'attribut innerHTML, nous affichons la valeur du curseur de plage comme indiqué ci-dessous -
res.innerHTML = "Range value is: " + range_value.value;
Utilisez l'événement onclick()
L'événementonclick() est un événement HTML utilisé pour effectuer une action lorsque l'utilisateur clique sur un bouton spécifique. Vous trouverez ci-dessous l'extrait de code utilisant l'événement onclick
<button onclick = ‘event_name()’>
Voici la procédure pour créer un curseur de plage personnalisé
Ce qui suit est le code HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom range Sliders</title>
</head>
<body>
<h2>Custom Range Sliders with HTML, CSS and JavaScript</h2>
<div class="sliders">
<p>Custom Range Slider: </p>
<input type="range" min = "1" max = "100" id = 'slider' title = 'range'><br>
<button id = 'btn'>Calulate Range</button>
<span id = 'res'></span>
</div>
</body>
</html>
Ce qui suit est le code CSS
style.css
span{ position: relative;
top: 35px;
left: 40px;
font-size: 30px;
font-weight: 700;
}
p{
position: relative;
left: 10px;
font-size: 20px;
}
input[type='range']
{
-webkit-appearance: none;
width: 400px;
height: 30px;
background-color: yellow;
border-radius: 60px;
}
#slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 50px;
height: 50px;
border-radius: 40px;
appearance: none;
cursor: pointer;
background-color: red;
}
button{
width: 150px;
height: 40px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
position: relative;
left: 20px;
top: 30px;
transition: 0.5s;
border-radius: 5px;
}
button:hover{
opacity: 0.7;
}
Ce qui suit est le programme JavaScript
index.js
let btn = document.getElementById('btn');
btn.onclick = function() {
//fetch the input range value through its id
let range_value = document.getElementById('slider');
//fetch the span tag through its id
let result = document.getElementById('res');
//show the value using innerHTML property
res.innerHTML = "Range value is: " + range_value.value;
}
Exemple
Exécutez le HTML, CSS et JavaScript ci-dessus.
Custom range Sliders Custom Range Sliders with HTML, CSS and JavaScript
<script> let btn = document.getElementById('btn'); btn.onclick = function() { //fetch the input range value through its id let range_value = document.getElementById('slider'); //fetch the span tag through its id let result = document.getElementById('res'); //show the value using innerHTML property res.innerHTML = "Range value is: " + range_value.value; } </script>
Dans le programme ci-dessus, nous utilisons HTML, CSS et JavaScript, en HTML nous créons un champ de saisie qui accepte le type comme plage, puis créons un bouton HTML (calculer la plage), puis nous créons une balise span pour afficher la valeur de la plage .
Dans les fichiers CSS, nous gérons le style de la page. En JavaScript, nous obtenons le bouton HTML par identifiant, puis utilisons l'événement onclick comme indiqué ci-dessous -
let btn = document.getElementById('btn');
btn.onclick = function(){}
Ensuite, à l'intérieur de la fonction, lorsque l'utilisateur clique sur le bouton, nous obtenons la plage d'entrée et affichons la valeur à l'aide de l'attribut innerHTML.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
Comment utilisez-vous CSS pour créer des effets de texte, tels que des ombres de texte et des gradients?
Mar 14, 2025 am 11:10 AM
L'article discute de l'utilisation de CSS pour les effets de texte comme les ombres et les gradients, les optimiser pour les performances et l'amélioration de l'expérience utilisateur. Il répertorie également les ressources pour les débutants (159 caractères)
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
