Adjust slider to be the full width of the page.

diff --git a/app/index.html b/app/index.html
index acddcc58d1977218fab0fde1089a3169490bc46c..00d155e95f50d9fcc8bd218afbb38dfcf88e3122 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -19,8 +19,11 @@
     <div class="pager">
       <input id="back" onclick="onPrev();" value="Back" type="button"/>
       <input id="forward" onclick="onNext();" value="Forward" type="button"/>
-      <input id="slider" onchange="onSlide(this.value);" min="0" max="0" type="range" value="0"/>
       Showing <span id="first">0</span> through <span id="last">0</span> out of <span id="count">0</span> matching books.
+      <br/>
+      <div class="slidercontainer">
+        <input id="slider" class="slider" onchange="onSlide(this.value);" min="0" max="0" type="range" value="0"/>
+      </div>
     </div>
 
     <div id="books">(No books found)</div>
@@ -30,8 +33,11 @@
     <div class="pager">
       <input id="bottom_back" onclick="onPrev();" value="Back" type="button"/>
       <input id="bottom_forward" onclick="onNext();" value="Forward" type="button"/>
-      <input id="bottom_slider" onchange="onSlide(this.value);" min="0" max="0" type="range" value="0"/>
       Showing <span id="bottom_first">0</span> through <span id="bottom_last">0</span> out of <span id="bottom_count">0</span> matching books.
+      <br/>
+      <div class="slidercontainer">
+        <input id="bottom_slider" class="slider" onchange="onSlide(this.value);" min="0" max="0" type="range" value="0"/>
+      </div>
     </div>
 
     <script src="modernizr-custom.js"></script>

diff --git a/app/lib.css b/app/lib.css
index 1c4baa0851606597f703ed78681b2efa4d7f46fc..ae25cde4ae70993ad422742e5a57ff676240569c 100644 (file)
--- a/app/lib.css
+++ b/app/lib.css
@@ -33,6 +33,10 @@ div.pager {
   text-align: left;
 }
 
+div.slidercontainer {
+  width: 100%;
+}
+
 h1 {
   background-color: #004080;
   border-color: #004080;
@@ -54,6 +58,13 @@ p.quote {
   text-align: justify;
 }
 
+input.slider {
+  -webkit-appearance: none:
+  appearance: none;
+  width: 100%;
+  outline: none;
+}
+
 span.popup { }
 
 span.popup:hover { text-decoration: none; background: #cfffff; z-index: 6; }