Maison > Article > interface Web > 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 ?

WBOYavant: 2023-08-25 16:45:07815parcourir

如何使用 CSS 和 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énement

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

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

onclick() 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 = &quot;Range value is: &quot; + range_value.value;
      }
   </script>
   
      Custom Range Slider:

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!

JavaScript css html JS 事件 innerHTML

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Convertir la couleur d'un objet en 256 niveaux de gris à l'aide de CSSArticle suivant：Convertir la couleur d'un objet en 256 niveaux de gris à l'aide de CSS

Articles Liés

Voir plus