☰

Zoom Slider

Adds a zoom slider that can be moved anywhere on the page

As of 2025-02-07. See the latest version.

// ==UserScript==
// @name         Zoom Slider
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a zoom slider that can be moved anywhere on the page
// @author       tae
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 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.position = 'fixed';
    slider.style.top = '10px';
    slider.style.left = '10px';
    slider.style.zIndex = '10000';
    slider.style.width = '200px';

    // Create a container for the slider to make it draggable
    const sliderContainer = document.createElement('div');
    sliderContainer.style.position = 'fixed';
    sliderContainer.style.top = '10px';
    sliderContainer.style.left = '10px';
    sliderContainer.style.zIndex = '10000';
    sliderContainer.style.padding = '5px';
    sliderContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    sliderContainer.style.border = '1px solid #ccc';
    sliderContainer.style.borderRadius = '5px';
    sliderContainer.style.cursor = 'move';
    sliderContainer.appendChild(slider);

    document.body.appendChild(sliderContainer);

    // Add zoom functionality
    slider.addEventListener('input', function() {
        document.body.style.transform = `scale(${slider.value})`;
        document.body.style.transformOrigin = '0 0';
    });

    // Make the slider draggable
    let isDragging = false;
    let startX, startY, initialLeft, initialTop;

    sliderContainer.addEventListener('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        initialLeft = parseInt(sliderContainer.style.left, 10);
        initialTop = parseInt(sliderContainer.style.top, 10);
        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 = `${initialLeft + dx}px`;
            sliderContainer.style.top = `${initialTop + dy}px`;
        }
    }

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