From 71f7725b43fbfd7574732c59f6b57836dca57c5d Mon Sep 17 00:00:00 2001
From: Mohamed Abuelanin <mabuelanin@gmail.com>
Date: Sun, 29 Sep 2024 11:06:23 -0700
Subject: [PATCH] fix sliders text input

---
 index.html | 81 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 54 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index c24b191..5cc0c46 100644
--- a/index.html
+++ b/index.html
@@ -2070,35 +2070,51 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
                             `).join('')}
                         </div>
                     </div>
-                    <!-- Range Sliders with Input Boxes -->
-                    <div class="row mt-3">
+                    <!-- Range Sliders with Input Boxes in Compact Layout -->
+                    <div class="container-fluid">
                         <!-- X-Axis Range Slider -->
-                        <div class="col-md-6">
-                            <label for="x-range-slider-${plotId}">X-Axis Range:</label>
-                            <div class="d-flex align-items-center">
-                                <input type="number" id="x-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
-                                <div id="x-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
-                                <input type="number" id="x-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
+                        <div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="x-range-slider-${plotId}" class="mb-0">X-Axis Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="x-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="x-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="x-range-max-input-${plotId}" class="form-control" placeholder="Max">
                             </div>
                         </div>
                         <!-- Y-Axis Range Slider -->
-                        <div class="col-md-6">
-                            <label for="y-range-slider-${plotId}">Y-Axis Range:</label>
-                            <div class="d-flex align-items-center">
-                                <input type="number" id="y-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
-                                <div id="y-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
-                                <input type="number" id="y-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
+                        <div class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="y-range-slider-${plotId}" class="mb-0">Y-Axis Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="y-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="y-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="y-range-max-input-${plotId}" class="form-control" placeholder="Max">
                             </div>
                         </div>
-                    </div>
-                    <!-- Hue Range Slider -->
-                    <div id="hue-range-slider-container-${plotId}" class="row mt-3" style="display: none;">
-                        <div class="col-md-12">
-                            <label for="hue-range-slider-${plotId}">Color Range:</label>
-                            <div class="d-flex align-items-center">
-                                <input type="number" id="hue-range-min-input-${plotId}" class="form-control mr-2" placeholder="Min" style="width: 80px;">
-                                <div id="hue-range-slider-${plotId}" class="range-slider flex-grow-1 mx-2"></div>
-                                <input type="number" id="hue-range-max-input-${plotId}" class="form-control ml-2" placeholder="Max" style="width: 80px;">
+                        <!-- Hue Range Slider -->
+                        <div id="hue-range-slider-container-${plotId}" class="row mt-3 p-3 border rounded" style="background-color: #f9f9f9; display: none;">
+                            <div class="col-2 d-flex align-items-center">
+                                <label for="hue-range-slider-${plotId}" class="mb-0">Color Range:</label>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="hue-range-min-input-${plotId}" class="form-control" placeholder="Min">
+                            </div>
+                            <div class="col-6">
+                                <div id="hue-range-slider-${plotId}" class="range-slider"></div>
+                            </div>
+                            <div class="col-2">
+                                <input type="number" id="hue-range-max-input-${plotId}" class="form-control" placeholder="Max">
                             </div>
                         </div>
                     </div>
@@ -2241,13 +2257,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
                     xSlider.noUiSlider.on('update', function (values, handle) {
                         xMinInput.value = parseFloat(values[0]).toFixed(2);
                         xMaxInput.value = parseFloat(values[1]).toFixed(2);
-                    });
-                    xSlider.noUiSlider.on('change', function (values, handle) {
-                        // Delay updating the plot
+
+                        // Debounce plot update
                         clearTimeout(xSlider.updateTimeout);
                         xSlider.updateTimeout = setTimeout(function () {
                             updatePlot(plotId);
-                        }, 500); // 500ms delay
+                        }, 500);
                     });
                     // Synchronize input boxes with slider
                     xMinInput.addEventListener('change', function () {
@@ -2290,6 +2305,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
                     ySlider.noUiSlider.on('update', function (values, handle) {
                         yMinInput.value = parseFloat(values[0]).toFixed(2);
                         yMaxInput.value = parseFloat(values[1]).toFixed(2);
+
+                        // Debounce plot update
+                        clearTimeout(ySlider.updateTimeout);
+                        ySlider.updateTimeout = setTimeout(function () {
+                            updatePlot(plotId);
+                        }, 500);
                     });
                     ySlider.noUiSlider.on('change', function (values, handle) {
                         // Delay updating the plot
@@ -2343,6 +2364,12 @@ <h3 id="plot-title-display-${plotId}" class="plot-title mt-3 text-center">Plot $
                         hueSlider.noUiSlider.on('update', function (values, handle) {
                             hueMinInput.value = parseFloat(values[0]).toFixed(2);
                             hueMaxInput.value = parseFloat(values[1]).toFixed(2);
+
+                            // Debounce plot update
+                            clearTimeout(hueSlider.updateTimeout);
+                            hueSlider.updateTimeout = setTimeout(function () {
+                                updatePlot(plotId);
+                            }, 500);
                         });
                         hueSlider.noUiSlider.on('change', function (values, handle) {
                             // Delay updating the plot