<!DOCTYPE html>
@WAIT-FOR:Ready
@EXECUTE-AND-WAIT-FOR:setSliderValue()
@BLINK-ALLOW:htmlTag*
@BLINK-ALLOW:className*
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Web Sliders</title>
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = [
"md-slider"
];
loadAndWaitForReady(components, () => {
const statusDiv = document.getElementById("status");
const sliders = [
{ id: "test-slider" },
{ value: 50 },
{ min: 0, max: 100, value: 25 },
{ step: 10, value: 30 },
{ disabled: true, value: 60 },
{ labeled: true, value: 75 },
{ ticks: true, value: 80 },
{ range: true, start: 20, end: 80 }
];
sliders.forEach(sliderInfo => {
const slider = document.createElement("md-slider");
for (const key in sliderInfo) {
slider[key] = sliderInfo[key];
}
statusDiv.appendChild(slider);
});
statusDiv.setAttribute("aria-label", "Ready");
});
</script>
</head>
<body>
<div id="status" aria-label="Loading">
</div>
</body>
<script>
async function setSliderValue() {
const slider = document.getElementById("test-slider");
if (slider) {
await slider.updateComplete;
slider.value = 25;
await slider.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Slider Set to 25";
statusDiv.appendChild(statusText);
return "Slider Set to 25";
}
return "Failed to set Slider";
}
</script>
</html>
