Beispiel:HTML input-range1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-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>
  <h1>Schieberegler  mit input type="range"</h1>
 
<figure>
	<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Autumn_Leaf_08Nov17.jpg/640px-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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML_input-range1.html&oldid=91137“