CodePen Shortcuts
//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/DrawSVGPlugin.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SplitText.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10
<input type='range' id='x1' value='7' min='1' max='13' />
<input type='range' id='x2' value='25' step='25' />
input#toggle-heart(type='checkbox')
label(for='toggle-heart' aria-label='like') ❤
<!-- BABEL
const _HUE = document.getElementById('hue');
function update() {
document.documentElement.style.setProperty('--hue', +_HUE.value);
};
_HUE.addEventListener('input', update, false);
_HUE.addEventListener('change', update, false);
PUG
- var initial_hue = 35;
form
input(type='range' id='hue' value=`${initial_hue}` max='360')
label(for='hue') hue
-->