☰

Greasy Fork is available in English.

Ultra Smooth Zoom Slider (Fixed)

Adds an ultra-smooth zoom slider with draggable functionality

// ==UserScript==
// @name         Ultra Smooth Zoom Slider (Fixed)
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  Adds an ultra-smooth zoom slider with draggable functionality
// @author       Fixed by ChatGPT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function createZoomSlider() {
        console.log("Creating ultra-smooth zoom slider...");

        // Create the slider
        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = '0.5';
        slider.max = '2';
        slider.step = '0.01';
        slider.value = '1';
        slider.style.width = '200px';

        // Create a container for the slider (fixed position, unaffected by zoom)
        const sliderContainer = document.createElement('div');
        sliderContainer.style.position = 'fixed';
        sliderContainer.style.bottom = '10px';
        sliderContainer.style.left = '10px';
        sliderContainer.style.zIndex = '10000';
        sliderContainer.style.padding = '8px';
        sliderContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
        sliderContainer.style.border = '1px solid #ccc';
        sliderContainer.style.borderRadius = '5px';
        sliderContainer.style.cursor = 'grab';
        sliderContainer.style.userSelect = 'none';
        sliderContainer.style.display = 'flex';
        sliderContainer.style.alignItems = 'center';
        sliderContainer.style.justifyContent = 'center';
        sliderContainer.style.boxShadow = '0px 2px 10px rgba(0, 0, 0, 0.2)';
        sliderContainer.appendChild(slider);

        document.body.appendChild(sliderContainer);
        console.log("Ultra-smooth zoom slider added.");

        // Ensure smooth zooming with transition effect
        document.documentElement.style.transition = 'zoom 0.2s ease-out';

        // Apply zoom on slider input
        slider.addEventListener('input', function() {
            document.documentElement.style.zoom = slider.value;
        });

        // Dragging functionality
        let isDragging = false;
        let startX, startY, initialLeft, initialBottom;

        sliderContainer.addEventListener('mousedown', function(e) {
            isDragging = true;
            sliderContainer.style.cursor = 'grabbing';
            startX = e.clientX;
            startY = e.clientY;
            initialLeft = sliderContainer.offsetLeft;
            initialBottom = window.innerHeight - sliderContainer.offsetTop - sliderContainer.offsetHeight;
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });

        function onMouseMove(e) {
            if (isDragging) {
                const dx = e.clientX - startX;
                const dy = e.clientY - startY;
                sliderContainer.style.left = `${Math.max(0, initialLeft + dx)}px`;
                sliderContainer.style.bottom = `${Math.max(0, initialBottom - dy)}px`;
            }
        }

        function onMouseUp() {
            isDragging = false;
            sliderContainer.style.cursor = 'grab';
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    }

    // Run script after DOM is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', createZoomSlider);
    } else {
        createZoomSlider();
    }
})();