Beispiel:Form-range-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>output-Element (Ergebnisausgabe eines Schiebereglers)</title>
<style>
form {
position: relative;
width: 30em;
height: 20em;
font: 1rem Georgia,serif;
}
#groesse-widget {
margin-left: 2em;
height: 15em;
}
label[for=groesse] {
display: block;
margin: 1em 0;
}
.labelled-vertical-range {
display: grid;
grid: "range labels value" 1fr / auto auto auto;
width: max-content;
}
.labelled-vertical-range input[type="range"] {
grid-area: range;
writing-mode: vertical-lr;
/* Standard 2024 */
direction: rtl;
width: auto;
height: 100%;
}
.labelled-vertical-range datalist {
grid-area: labels;
display: flex;
flex-flow: column-reverse;
justify-content: space-between;
margin-top: -0.2em;
margin-bottom: -0.2em;
}
.labelled-vertical-range output {
grid-area: value;
align-self: center;
width: 4em;
text-align: right;
color: white;
font-weight: bold;
background-image: linear-gradient(160deg, white, lightgrey 10%, grey);
border-radius: 1em;
padding: 1em 0.5em;
}
output:after {
content: " cm";
width: 2em;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".labelled-vertical-range")
.forEach(function(widget) {
const rangeElem = widget.querySelector("input[type=range]");
const outputElem = widget.querySelector("output");
widget.addEventListener("input", function() { showSliderValue(rangeElem, outputElem); });
showSliderValue(rangeElem, outputElem);
});
function showSliderValue(slider, output) {
output.textContent = slider.value;
}
});
</script>
</head>
<body>
<h1>Körpergröße</h1>
<form>
<label for="groesse">Bitte geben Sie Ihre Körpergröße an:</label>
<div id="groesse-widget" class="labelled-vertical-range">
<input type="range" name="groesse" id="groesse" min="50" value="130" max="250">
<datalist id="körpergröße">
<option value="50">50 cm</option>
<option value="100">100 cm</option>
<option value="150">150 cm</option>
<option value="200">200 cm</option>
<option value="250">250 cm</option>
</datalist>
<output for="groesse">0</output>
</div>
</form>
</body>
</html>
