HTML Range Input Generator

Generate custom HTML range input sliders with our free tool. Easily customize min/max values, steps, and styles to get responsive code for your website.

`; }; // Add event listeners for all controls Object.values(controls).forEach(control => { control.addEventListener('input', updateUI); control.addEventListener('change', updateUI); // For checkboxes }); // Add a specific listener for the preview slider itself to update the value display previewInput.addEventListener('input', () => { previewValue.textContent = previewInput.value; }); // Add event listeners for copy buttons document.querySelectorAll('.rig-copy-btn').forEach(button => { button.addEventListener('click', () => { const targetId = button.dataset.target; const targetTextarea = document.getElementById(targetId); if (!targetTextarea.value.trim()) { alert('There is no code to copy.'); return; } navigator.clipboard.writeText(targetTextarea.value).then(() => { const originalText = button.textContent; button.textContent = 'Copied!'; setTimeout(() => { button.textContent = originalText; }, 2000); }).catch(() => alert('Failed to copy. Please copy manually.')); }); }); // Add event listener for reset button resetBtn.addEventListener('click', () => { controls.name.value = 'volume'; controls.id.value = 'volume-slider'; controls.min.value = 0; controls.max.value = 100; controls.step.value = 1; controls.value.value = 50; controls.disabled.checked = false; controls.autofocus.checked = false; updateUI(); }); updateUI(); });