Skip to content

Commit

Permalink
Merged in changes from #244 and corrected a couple of validation errors.
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Aug 20, 2012
1 parent 46d9667 commit d70ac37
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 58 deletions.
97 changes: 69 additions & 28 deletions demos/slider/slider-eng.html
View file
Expand Up @@ -99,34 +99,75 @@
<h1 id="wb-cont">Slider control (input type="range" polyfill)</h1>

<div>
<div class="span-3">
<fieldset>
<legend>Slider&#160;1</legend>
<label for="html5shim-1">Range: 0 to 100 in steps of 1 <span id="html5shim-1-out"></span></label>
<p><input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Slider&#160;2</legend>
<label for="html5shim-2">Range: 20 to 50 in steps of 10 <span id="html5shim-2-out"></span></label>
<p><input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Range: 10 to 50 in steps of 10" value="0" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Vertical slider&#160;1</legend>
<label for="html5shim-V1">Range: 0 to 100 in steps of 1 <span id="html5shim-V1-out"></span></label>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Slider&#160;2</legend>
<label for="html5shim-V2">Range: 20 to 50 in steps of 10 <span id="html5shim-V2-out"></span></label>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Range: 10 to 50 in steps of 10" value="0" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</fieldset>
</div>
<p>Use the following attributes to specify restrictions:</p>
<ul>
<li>max - specifies the maximum value allowed</li>
<li>min - specifies the minimum value allowed</li>
<li>step - specifies the legal number intervals</li>
<li>value - specifies the default value</li>
</ul>
</div>

<div class="wet-boew-prettify all-pre">
<section>
<h3 id="examples1">Horizontal Example</h3>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Range: 0 to 100 in steps of 1 <span id="html5shim-1-out"></span></h4>
<p><input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Coding</h4>
<pre><code>&lt;input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Range: 20 to 50 in steps of 10 <span id="html5shim-2-out"></span></h4>
<p><input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Coding</h4>
<pre><code>&lt;input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Current Value: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
</section>
<section>
<h3 id="examples2">Vertical Example</h3>
<p>Set attibute data-fd-slider-vertical="v-s" to set the slider in vertical position.</p>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Range: 0 to 100 in steps of 1 <span id="html5shim-V1-out"></span></h4>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Coding</h4>
<pre><code>&lt;input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Range: 0 to 100 in steps of 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Current Value: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Range: 20 to 50 in steps of 10 <span id="html5shim-V2-out"></span></h4>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Current Value: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Coding</h4>
<pre><code>&lt;input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Range: 20 to 50 in steps of 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Current Value: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
</section>
<div class="clear"></div>
</div>

<!-- MainContentEnd -->
Expand Down
101 changes: 71 additions & 30 deletions demos/slider/slider-fra.html
View file
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<!--[if IE 7]> <html lang="fr" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="fr class="no-js ie8"> <![endif]-->
<!--[if IE 8]> <html lang="fr" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr" class="no-js">
<!--<![endif]-->
Expand Down Expand Up @@ -59,7 +59,7 @@

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbole du gouvernement du Canada"><img src="../../build/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbole du gouvernement du Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../docs/index-fra.html">Boîte à outils de l'expérience Web&#160;(BOEW)</a></p></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../docs/index-fra.html">Boîte à outils de l'expérience Web (BOEW)</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Recherche</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
Expand Down Expand Up @@ -98,34 +98,75 @@
<h1 id="wb-cont">Commande de barre coulissante (correctif pour <span lang="en">input type="range"</span>)</h1>

<div>
<div class="span-3">
<fieldset>
<legend>Barre coulissante&#160;1</legend>
<label for="html5shim-1">Étendue&#160;: 0 à 100 avec les augmentations de 1 <span id="html5shim-1-out"></span></label>
<p><input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 1" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Barre coulissante&#160;2</legend>
<label for="html5shim-2">Étendue&#160;: 20 à 50 avec les augmentations de 10 <span id="html5shim-2-out"></span></label>
<p><input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="0" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Barre coulissante verticale&#160;1</legend>
<label for="html5shim-V1">Étendue&#160;: 0 à 100 avec les augmentations de 1 <span id="html5shim-V1-out"></span></label>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</fieldset>
</div>
<div class="span-3">
<fieldset>
<legend>Barre coulissante verticale&#160;2</legend>
<label for="html5shim-V2">Étendue&#160;: 20 à 50 avec les augmentations de 10 <span id="html5shim-V2-out"></span></label>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="0" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</fieldset>
</div>
<p>Utilisez les attributs suivants pour spécifier les restrictions:</p>
<ul>
<li>max - spécifie la valeur maximale autorisée</li>
<li>min - spécifie la valeur minimale autorisée</li>
<li>step - spécifie la valeur d'intervalles (augmentations)</li>
<li>value - spécifie la valeur par défaut</li>
</ul>
</div>

<div class="wet-boew-prettify all-pre">
<section>
<h3 id="examples1">Example horizontal</h3>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Étendue&#160;: 0 à 100 avec les augmentations de 1 <span id="html5shim-1-out"></span></h4>
<p><input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 10" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Code</h4>
<pre><code>&lt;input name="html5shim-1" id="html5shim-1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 10" value="50" onchange="document.getElementById('html5shim-1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Étendue&#160;: 20 à 50 avec les augmentations de 10 <span id="html5shim-2-out"></span></h4>
<p><input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="20" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Code</h4>
<pre><code>&lt;input name="html5shim-2" id="html5shim-2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="20" onchange="document.getElementById('html5shim-2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
</section>
<section>
<h3 id="examples2">Example vertical</h3>
<p>Définissez l'attribut data-fd-slider-vertical="v-s" pour placer la barre coulissante en position verticale.</p>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Étendue&#160;: 0 à 100 avec les augmentations de 1 <span id="html5shim-V1-out"></span></h4>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Code</h4>
<pre><code>&lt;input data-fd-slider-vertical="v-s" name="html5shim-V1" id="html5shim-V1" type="range" min="0" max="100" step="1" title="Étendue&#160;: 0 à 100 avec les augmentations de 1" value="50" onchange="document.getElementById('html5shim-V1-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
<div class="clear"></div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Étendue&#160;: 20 à 50 avec les augmentations de 10 <span id="html5shim-V2-out"></span></h4>
<p><input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /></p>
</section>
</div>
<div class="span-4">
<section>
<h4 class="background-dark margin-bottom-medium">Code</h4>
<pre><code>&lt;input data-fd-slider-vertical="v-s" name="html5shim-V2" id="html5shim-V2" type="range" min="20" max="50" step="10" title="Étendue&#160;: 20 à 50 avec les augmentations de 10" value="20" onchange="document.getElementById('html5shim-V2-out').innerHTML = '(Valeur actuelle&#160;: ' + this.value + ')'" /&gt;</code></pre>
</section>
</div>
</section>
<div class="clear"></div>
</div>

<!-- MainContentEnd -->
Expand Down

0 comments on commit d70ac37

Please sign in to comment.