Beispiel:Form-range-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./Beispiel:Grundlayout.css"> <title>Schieberegler mit input type="range"</title>
<style> figure { box-sizing: border-box; max-width: 40em; margin: auto; }
img { width: 100%; }
label { display: block; margin-top: 1em; }
input { display: block; width: 100%; margin: 0; } </style> <script> 'use strict'; document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#grayscale').addEventListener('input', grayscaleImage);
grayscaleImage();
});
function grayscaleImage() {
var imageElement = document.querySelector('#image');
var grayscaleInputElement = document.querySelector('#grayscale');
imageElement.style.filter = 'grayscale(' + parseInt(grayscaleInputElement.value) / parseInt(grayscaleInputElement.max) +')';
return false;
}
</script>
</head>
<body>
Schieberegler mit input type="range"
<figure> <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Autumn_Leaf_08Nov17.jpg/960px-Autumn_Leaf_08Nov17.jpg" alt="Autumn leaves"/> <label for="grayscale">Verändern Sie die Graustufen</label> <input id="grayscale" type="range" min="0" max="100" value="30"/> </figure>
</body> </html>
