diff options
Diffstat (limited to 'files/fr/web/html/element/input/range/index.html')
| -rw-r--r-- | files/fr/web/html/element/input/range/index.html | 57 |
1 files changed, 24 insertions, 33 deletions
diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html index eae6bb4f32..04f159c62d 100644 --- a/files/fr/web/html/element/input/range/index.html +++ b/files/fr/web/html/element/input/range/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/range <p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - <p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p> <h2 id="Valeur">Valeur</h2> @@ -101,18 +99,18 @@ translation_of: Web/HTML/Element/input/range <p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p> -<div id="Granularity_sample1"> +<h4 id="Exemple_1">Exemple 1</h4> <pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> -<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_1", 600, 40)}}</p> + +<h4 id="Exemple_2">Exemple 2</h4> <p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p> -<div id="Granularity_sample2"> <pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> -<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 600, 40)}}</p> <p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p> </div> @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/range <pre class="brush: html"> <input type="range"></pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Capture d'écran d'un contrôle curseur sur macOS" src="macslider-plain.png"></td> </tr> </tbody> </table> @@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/input/range </datalist> </pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-ticks.png"></td> </tr> </tbody> </table> @@ -210,7 +208,7 @@ translation_of: Web/HTML/Element/input/range </datalist> </pre> </td> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-labels.png"></td> </tr> </tbody> </table> @@ -221,47 +219,41 @@ translation_of: Web/HTML/Element/input/range <h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3> -<div class="hidden"> -<p>Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.</p> - -<div class="note"> -<p><strong>Note :</strong> Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">bug 341071</a> pour Chrome).</p> -</div> - <p>Par exemple :</p> -<div id="Orientation_sample1"> +<h4 id="horizontal">Horizontal</h4> + <pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -</div> -<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> +<p>{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}</p> <p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p> -<div id="Orientation_sample2"> -<h4 id="CSS">CSS</h4> +<h4 id="vertical">Vertical</h4> + +<h5 id="CSS">CSS</h5> <pre class="brush: css">#volume { height: 150px; width: 50px; }</pre> -<h4 id="HTML">HTML</h4> +<h5 id="HTML">HTML</h5> <pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -<h4 id="Result">Result</h4> +<h5 id="Result">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> +<p>{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}</p> <p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p> -</div> -</div> + <p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p> -<div id="Orientation_sample3"> -<h4 id="HTML_2">HTML</h4> +<h4 id="Autre_exemple">Autre exemple</h4> + +<h5 id="HTML_2">HTML</h5> <p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p> @@ -269,7 +261,7 @@ translation_of: Web/HTML/Element/input/range <input type="range" min="0" max="11" value="7" step="1"> </div></pre> -<h4 id="CSS_2">CSS</h4> +<h5 id="CSS_2">CSS</h5> <p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p> @@ -292,10 +284,9 @@ Ensuite, on applique une transformation sur l'élément <code><input></cod <p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p> -<h4 id="Résultat">Résultat</h4> +<h5 id="Résultat">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> -</div> +<p>{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}</p> <h2 id="Validation">Validation</h2> |