From 14378dd1fea589a9350db7a1c93ce13e0b822382 Mon Sep 17 00:00:00 2001
From: mattk70 <email@mattkirkland.co.uk>
Date: Fri, 27 Sep 2024 23:48:31 +0100
Subject: [PATCH] fixed dual slider fill

---
 index.html   |  4 ++--
 js/slider.js |  9 +++------
 js/ui.js     | 30 ++++++++++++++++++------------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 784dae83..c80cf798 100644
--- a/index.html
+++ b/index.html
@@ -53,11 +53,11 @@
                 </div>
                 <div class="form_control">
                     <div class="form_control_container">
-                        <div class="form_control_container__time">Min</div>
+                        <div class="form_control_container__time">Min Hz</div>
                         <input class="rounded" type="number" id="fromInput" value="0" min="0" max="11950" step="50"/>
                     </div>
                     <div class="form_control_container">
-                        <div class="form_control_container__time">Max</div>
+                        <div class="form_control_container__time">Max Hz</div>
                         <input class="rounded" type="number" id="toInput" value="11950" min="0" max="11950" step="50"/>
                     </div>
                     <div class="form_control_container d-flex">
diff --git a/js/slider.js b/js/slider.js
index 2c270ff3..7d850715 100644
--- a/js/slider.js
+++ b/js/slider.js
@@ -47,8 +47,8 @@ function controlToSlider(fromSlider, toSlider, toInput) {
 }
 
 function getParsed(currentFrom, currentTo) {
-  const from = parseInt(currentFrom.value, 10);
-  const to = parseInt(currentTo.value, 10);
+  const from = currentFrom.valueAsNumber;
+  const to = currentTo.valueAsNumber;
   return [from, to];
 }
 
@@ -75,10 +75,7 @@ function setToggleAccessible(currentTarget) {
   }
 }
 
-const fromSlider = document.querySelector('#fromSlider');
-const toSlider = document.querySelector('#toSlider');
-const fromInput = document.querySelector('#fromInput');
-const toInput = document.querySelector('#toInput');
+
 fillSlider(fromSlider, toSlider, '#C6C6C6', '#0d6efd', toSlider);
 setToggleAccessible(toSlider);
 
diff --git a/js/ui.js b/js/ui.js
index 0902cfbb..a0772da9 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -164,6 +164,10 @@ const bodyElement = document.body;
 let specElement, waveElement, specCanvasElement, specWaveElement;
 let waveCanvasElement, waveWaveElement;
 const DOM = {
+    fromSlider: document.getElementById('fromSlider'),
+    toSlider: document.getElementById('toSlider'),
+    fromInput: document.getElementById('fromInput'),
+    toInput: document.getElementById('toInput'),
      audioBitrate: document.getElementById('bitrate'),
      audioBitrateContainer: document.getElementById('bitrate-container'),
      audioDownmix: document.getElementById('downmix'),
@@ -1624,10 +1628,11 @@ window.onload = async () => {
         // Spectrogram labels
         DOM.specLabels.checked = config.specLabels;
         // Spectrogram frequencies
-        document.getElementById('fromInput').value = config.minFrequency;
-        document.getElementById('fromSlider').value = config.minFrequency;
-        document.getElementById('toInput').value = config.maxFrequency;
-        document.getElementById('toSlider').value = config.maxFrequency;
+        DOM.fromInput.value = config.minFrequency;
+        DOM.fromSlider.value = config.minFrequency;
+        DOM.toInput.value = config.maxFrequency;
+        DOM.toSlider.value = config.maxFrequency;
+        fillSlider(DOM.fromInput, DOM.toInput,  '#C6C6C6', '#0d6efd', DOM.toSlider)
         if (config.minFrequency > 0 || config.maxFrequency < 11950) {
             document.getElementById('frequency-range').classList.add('text-warning');
         }
@@ -4317,10 +4322,11 @@ DOM.gain.addEventListener('input', () => {
             case 'reset-spec-frequency': {
                 config.minFrequency = 0;
                 config.maxFrequency = 11950;
-                document.getElementById('fromInput').value = config.minFrequency;
-                document.getElementById('fromSlider').value = config.minFrequency;
-                document.getElementById('toInput').value = config.maxFrequency;
-                document.getElementById('toSlider').value = config.maxFrequency;
+                DOM.fromInput.value = config.minFrequency;
+                DOM.fromSlider.value = config.minFrequency;
+                DOM.toInput.value = config.maxFrequency;
+                DOM.toSlider.value = config.maxFrequency;
+                fillSlider(DOM.fromInput, DOM.toInput,  '#C6C6C6', '#0d6efd', DOM.toSlider)
                 const fftSamples = wavesurfer.spectrogram.fftSamples;
                 wavesurfer.destroy();
                 wavesurfer = undefined;
@@ -4583,8 +4589,8 @@ DOM.gain.addEventListener('input', () => {
                 case 'fromInput':
                 case 'fromSlider': {
                     config.minFrequency = Math.max(element.valueAsNumber, 0);
-                    document.getElementById('fromInput').value = config.minFrequency;
-                    document.getElementById('fromSlider').value = config.minFrequency;
+                    DOM.fromInput.value = config.minFrequency;
+                    DOM.fromSlider.value = config.minFrequency;
                     const fftSamples = wavesurfer.spectrogram.fftSamples;
                     wavesurfer.destroy();
                     wavesurfer = undefined;
@@ -4599,8 +4605,8 @@ DOM.gain.addEventListener('input', () => {
                 case 'toInput':
                 case 'toSlider': {
                     config.maxFrequency = Math.min(element.valueAsNumber, 11950);
-                    document.getElementById('toInput').value = config.maxFrequency;
-                    document.getElementById('toSlider').value = config.maxFrequency;
+                    DOM.toInput.value = config.maxFrequency;
+                    DOM.toSlider.value = config.maxFrequency;
                     const fftSamples = wavesurfer.spectrogram.fftSamples;
                     wavesurfer.destroy();
                     wavesurfer = undefined;