Sindbad~EG File Manager

Current Path : /home/beeson/public_html/WebMathXpert/
Current File : //home/beeson/public_html/WebMathXpert/SliderTest.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Test (Green Knob Activation)</title>
    <script>
        let activeSlider = "slider1"; // Default active slider

        document.addEventListener("DOMContentLoaded", function () {
            console.log("DOM fully loaded.");

            document.getElementById("slider1").addEventListener("pointerup", function () {
                activateSlider("slider1");
            });

            document.getElementById("slider2").addEventListener("pointerup", function () {
                activateSlider("slider2");
            });

            updateSliderKnobs();
        });

        function activateSlider(sliderId) {
            if (activeSlider === sliderId) return; // Already active, do nothing
            
            activeSlider = sliderId;
            console.log("Activated slider:", sliderId);
            updateSliderKnobs();
        }

        function updateSliderKnobs() {
            // Reset all sliders to white knobs
            document.querySelectorAll("input[type=range]").forEach(slider => {
                slider.classList.remove("active-slider");
            });

            // Set active slider knob to green
            document.getElementById(activeSlider).classList.add("active-slider");
        }
    </script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        .slider-container { margin: 20px; }
        input[type="range"] { 
            width: 300px; 
            display: block; 
            margin: 10px auto; 
            appearance: none; /* Remove default styling */
            height: 6px;
            background: #ddd;
            border-radius: 3px;
            outline: none;
        }

        /* Default white knob */
        input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid black;
            border-radius: 50%;
            cursor: pointer;
        }

        /* Active slider has a green knob */
        input[type="range"].active-slider::-webkit-slider-thumb {
            background: green;
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid black;
            border-radius: 50%;
            cursor: pointer;
        }

        input[type="range"].active-slider::-moz-range-thumb {
            background: green;
        }

    </style>
</head>
<body>

    <h2>Slider Test (Green Knob Activation)</h2>
    <p>Click a slider to activate it. The active slider knob turns green.</p>

    <div class="slider-container">
        <label for="slider1">Slider 1</label>
        <input type="range" id="slider1" min="0" max="100" step="1">
    </div>

    <div class="slider-container">
        <label for="slider2">Slider 2</label>
        <input type="range" id="slider2" min="0" max="100" step="1">
    </div>

</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists