2024-01-13 12:31:03 -07:00
|
|
|
<!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() {
|
|
|
|
|
var input = document.createElement("input");
|
|
|
|
|
this.appendChild(input);
|
|
|
|
|
|
|
|
|
|
var jsr = new JSR(input, {
|
|
|
|
|
max: this.max,
|
|
|
|
|
values: [this.val],
|
|
|
|
|
sliders: 1,
|
|
|
|
|
grid: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var rangeSliderNode = this;
|
|
|
|
|
|
|
|
|
|
jsr.addEventListener("update", function(elem, value) {
|
|
|
|
|
var event = new CustomEvent("slide", {
|
|
|
|
|
detail: {userSlidTo: value}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
rangeSliderNode.dispatchEvent(event);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.customElements.define("range-slider", RangeSlider);
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app"></div> <!-- Elm application renders into this div --!>
|
|
|
|
|
|
|
|
|
|
<script src="http://elm-in-action.com/pasta.js"></script>
|
|
|
|
|
<script src="app.js"></script> <!-- PhotoGroove.elm will get compiled into app.js --!>
|
|
|
|
|
<script>
|
2024-02-01 00:37:08 -07:00
|
|
|
var app = Elm.PhotoFolders.init({ node: document.getElementById("app"), }); // Elm object comes from app.js
|
2024-01-13 12:31:03 -07:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
