type="range"
<input> element as "slider".
๐ฐ HTML โฉ Elements โฉ <input> โฉ
const {log} = console;
const control = $('#control');
const div3 = $('#div3');
const label = $('#label');
const calc = $('#calc');
// marginControl.oninput
control.addEventListener('input', (e) => {
let x = e.target.value;
let percent = x + '%';
label.textContent = 'marginTop: ' + percent;
calc.textContent = `${percent} x 200px = ${2*x}px`
div3.style.marginTop = percent;
});
// โญ๏ธ ่ชๅ่ทไธๆฌก 'oninput' event
control.dispatchEvent(new Event('input'));
// $ โญ๏ธ selector
function $(selector, parent = document){
return parent.querySelector(selector);
}
Last updated
Was this helpful?