Adds an ultra-smooth zoom slider with draggable functionality. Keeps slider always visible and unaffected by zoom.
// ==UserScript==
// @name Ultra Smooth Zoom Slider (Fixed & Isolated UI)
// @namespace http://tampermonkey.net/
// @version 1.9
// @description Adds an ultra-smooth zoom slider with draggable functionality. Keeps slider always visible and unaffected by zoom.
// @author tae
// @match *://*/*
// @grant none
// ==/UserScript==
(function () {
'use strict';
function createZoomSlider() {
console.log("✅ Ultra Smooth Zoom Slider Initialized...");
// 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
const sliderContainer = document.createElement('div');
Object.assign(sliderContainer.style, {
position: 'fixed',
bottom: '10px',
left: '10px',
zIndex: '999999', // High z-index to stay on top
padding: '8px',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
border: '1px solid #ccc',
borderRadius: '5px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.2)',
cursor: 'grab',
userSelect: 'none'
});
sliderContainer.appendChild(slider);
document.body.appendChild(sliderContainer);
console.log("🎯 Zoom slider added successfully.");
// Create a zoomable wrapper
const zoomWrapper = document.createElement('div');
zoomWrapper.id = 'zoom-wrapper';
while (document.body.firstChild && document.body.firstChild !== sliderContainer) {
zoomWrapper.appendChild(document.body.firstChild);
}
document.body.insertBefore(zoomWrapper, sliderContainer);
// Apply transform to wrapper, not the whole document
zoomWrapper.style.transformOrigin = 'top left';
zoomWrapper.style.transition = 'transform 0.2s ease-out';
slider.addEventListener('input', function () {
zoomWrapper.style.transform = `scale(${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);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', createZoomSlider);
} else {
createZoomSlider();
}
})();