Reader: add progress slider

reader.html

@@ -77,16 +77,10 @@ body {
 #nav-bar {
     bottom: 0;
 }
-#progress-label {
-    font-size: small;
-    font-variant-numeric: tabular-nums;
-    color: GrayText;
-}
-.scrolled #progress-label {
-    color: #fff;
-    background: #000;
-    border-radius: 2em;
-    padding: 6px 12px;
+#progress-slider {
+    flex-grow: 1;
+    margin: 0 12px;
+    visibility: hidden;
 }
 #side-bar {
     visibility: hidden;
@@ -294,7 +288,8 @@ body {
             <path d="M 15 6 L 9 12 L 15 18"/>
         </svg>
     </button>
-    <div id="progress-label"></div>
+    <input id="progress-slider" type="range" min="0" max="1" step="any" list="tick-marks">
+    <datalist id="tick-marks"></datalist>
     <button id="right-button" aria-label="Go right">
         <svg class="icon" width="24" height="24" aria-hidden="true">
             <path d="M 9 6 L 15 12 L 9 18"/>

reader.js

@@ -152,6 +152,7 @@ class Reader {
     }
     async open(file) {
         this.view = await getView(file, this.#handleEvent.bind(this))
+        const { book } = this.view
         this.setAppearance()
         this.view.renderer.next()
 
@@ -160,9 +161,24 @@ class Reader {
         $('#left-button').addEventListener('click', () => this.view.goLeft())
         $('#right-button').addEventListener('click', () => this.view.goRight())
 
+        const slider = $('#progress-slider')
+        slider.dir = book.dir
+        slider.addEventListener('input', e =>
+            this.view.goToFraction(parseFloat(e.target.value)))
+        const sizes = book.sections.filter(s => s.linear !== 'no').map(s => s.size)
+        if (sizes.length < 100) {
+            const total = sizes.reduce((a, b) => a + b, 0)
+            let sum = 0
+            for (const size of sizes.slice(0, -1)) {
+                sum += size
+                const option = document.createElement('option')
+                option.value = sum / total
+                $('#tick-marks').append(option)
+            }
+        }
+
         document.addEventListener('keydown', this.#handleKeydown.bind(this))
 
-        const { book } = this.view
         const title = book.metadata?.title ?? 'Untitled Book'
         document.title = title
         $('#side-bar-title').innerText = title
@@ -211,8 +227,11 @@ class Reader {
         const loc = pageItem
             ? `Page ${pageItem.label}`
             : `Loc ${location.current}`
-        $('#progress-label').innerText = `${percent} · ${loc}`
-        if (tocItem?.href) this.#tocView.setCurrentHref?.(tocItem.href)
+        const slider = $('#progress-slider')
+        slider.style.visibility = 'visible'
+        slider.value = fraction
+        slider.title = `${percent} · ${loc}`
+        if (tocItem?.href) this.#tocView?.setCurrentHref?.(tocItem.href)
     }
     #onReference(obj) {
         const { content, pos: { point, dir } } = obj