62 lines
1.5 KiB
HTML
62 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="http://elm-in-action.com/styles.css">
|
|
<link rel="stylesheet" href="http://elm-in-action.com/range-slider.css">
|
|
<script src="http://elm-in-action.com/range-slider.js"></script>
|
|
<script>
|
|
class RangeSlider extends HTMLElement {
|
|
connectedCallback() {
|
|
const input = document.createElement("input");
|
|
this.appendChild(input);
|
|
|
|
const jsr = new JSR(input, {
|
|
max: this.max,
|
|
values: [this.val],
|
|
sliders: 1,
|
|
grid: false,
|
|
});
|
|
|
|
const rangeSliderNode = this;
|
|
|
|
jsr.addEventListener("update", function (elem, value) {
|
|
const event = new CustomEvent("slide", {
|
|
detail: {
|
|
userSlidTo: value
|
|
},
|
|
});
|
|
|
|
rangeSliderNode.dispatchEvent(event);
|
|
});
|
|
}
|
|
}
|
|
|
|
window.customElements.define("range-slider", RangeSlider);
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
<script src="http://elm-in-action.com/pasta.js"></script>
|
|
<script src="/app.js"></script>
|
|
<script>
|
|
const app = Elm.Main.init({
|
|
node: document.getElementById("app"),
|
|
flags: Pasta.version,
|
|
});
|
|
|
|
app.ports.setFilters.subscribe(function (options) {
|
|
requestAnimationFrame(function () {
|
|
Pasta.apply(document.getElementById("main-canvas"), options);
|
|
});
|
|
});
|
|
|
|
Pasta.addActivityListener(function (activity) {
|
|
app.ports.activityChanges.send(activity);
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|