Add support for data-type-range-step=""

remy · Jul 18, 2012 · a712282 · a712282
1 parent 63ae39d
commit a712282
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/range.js b/range.js
@@ -79,6 +79,10 @@ if (bool) {
       range.min = firstChild(select, 'option').value;
       range.max = lastChild(select, 'option').value;
       range.value = select.value;
+      // Add step support
+      if ( select.getAttribute('data-type-range-step') ) {
+        range.step = select.getAttribute('data-type-range-step');
+      }
       // yeah, this is filth, but it's because getElementsByTagName is
       // a live DOM collection, so when we removed the select element
       // the selects object reduced in length. Freaky, eh?

diff --git a/tests/range.html b/tests/range.html
@@ -0,0 +1,44 @@
+<!doctype html> 
+<html> 
+<head> 
+<title>range polyfill...</title> 
+</head> 
+<body> 
+  <div> 
+    <select class="foo" id="first" title="1-5 please" data-type="range"> 
+      <option value="1">1</option> 
+      <option value="2">2</option> 
+      <option value="3">3</option> 
+      <option value="4">4</option> 
+      <option selected value="5">5</option> 
+    </select> 
+  </div> 
+  <br>
+  <select> 
+    <option value="3">3</option> 
+    <option value="4">4</option> 
+    <option value="5">5</option> 
+  </select> 
+  <br>
+  <select autofocus data-type="range"> 
+    <option value="1">3</option> 
+    <option selected value="4">4</option> 
+    <option value="50">5</option> 
+  </select>
+  <br>
+  <p>Last two examples are as the previous, but add <code>data-type-range-step="5"</code>:</p>
+  <select data-type="range" data-type-range-step="5">
+    <option value="1">3</option> 
+    <option selected value="4">4</option> 
+    <option value="50">5</option> 
+  </select>
+  <br>
+  <p>This one has the last value set to 51, instead of 50:</p>
+  <select data-type="range" data-type-range-step="5">
+    <option value="1">3</option> 
+    <option selected value="4">4</option> 
+    <option value="51">5</option> 
+  </select>
+  <script src="../range.js"></script>
+</body>
+</html>