Updated the example explanation copy and added a slider output value

tjozsa · Jul 16, 2016 · 6a32367 · 6a32367
1 parent d887b33
commit 6a32367
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/examples.csv b/examples.csv
@@ -36,5 +36,5 @@ Typos,/typos
 Nested Frames,/nested_frames
 Floating Menu,/floating_menu
 Infinite Scroll,/infinite_scroll
-Horizontal Slider, /horizontal_slider
 Exit Intent,/exit_intent
+Horizontal Slider, /horizontal_slider
diff --git a/views/horizontal_slider.erb b/views/horizontal_slider.erb
@@ -1,8 +1,12 @@
 <div class="example">
   <h3>Horizontal Slider</h3>
-  <h4 class="subheader">Set the focus on the slider (click) and use the arrow keys to move it right and left.</h4>
+  <h4 class="subheader">Set the focus on the slider (by clicking on it) and use the arrow keys to move it right and left. Or click and drag the slider with your mouse. It will indicate the value of the slider to the right.</h4>
   <div class="sliderContainer">
-    <input type="range" min="0.0" max="5.0" step="0.5">
-    <div class="sliderTicks"><span></span><span></span><span></span><span></span><span></span><span></span></div>
+    <input type="range" min="0.0" max="5.0" step="0.5" value="0" onchange="showValue(this.value)">
+    &nbsp;
+    <span id="range">0</span>
   </div>
 </div>
+<script type="text/javascript">
+  function showValue(newValue) { $("#range").html(newValue); }
+</script>