From: Chris Jaekl <chris@localhost>
Date: Wed, 29 Dec 2021 21:26:04 +0000 (-0500)
Subject: Adjust slider to be the full width of the page.
X-Git-Url: https://jaekl.net/gitweb/?a=commitdiff_plain;h=723db788dfc2ae83c03ca551908144ec6c47d6b9;p=quanweb.git

Adjust slider to be the full width of the page.
---

diff --git a/app/index.html b/app/index.html
index acddcc5..00d155e 100644
--- 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 1c4baa0..ae25cde 100644
--- 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; }