Public
Edited
Dec 9, 2022
slider = {
const c = document.createElement("div");
c.className = "container";
const before = c.appendChild(document.createElement("div"));
before.className = "img background-img";
const after = c.appendChild(document.createElement("div"));
after.className = "img foreground-img";
const s = c.appendChild(document.createElement("input"));
s.setAttribute("type","range");
s.setAttribute("min","1");
s.setAttribute("max","100");
s.setAttribute("value","50");
s.setAttribute("name","slider");
s.setAttribute("id","slider");
s.className = "slider";
s.addEventListener('change', slide);
const b = c.appendChild(document.createElement("div"))
b.className = "slider-button"
function slide(e) {
let sliderPos = e.target.value;
// Update the width of the foreground image
after.style.width = sliderPos + '%';
// Update the position of the slider button
b.style.left = 'calc(' + sliderPos + '% - 18px)';
}
return c;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
