Date: 04/29/2020
I loved it! 😍
I learned about how to use 02 new tags:
The range input tag, which define a range control. On this case [10, 200]:
<input type="range" min="10" max="200" >The color input tag, which defines a color picker:
<input id="base" type="color" name="base" value="#ffc600">Wes used the CSS Variables to manipulate the HTML tags values.
On the HTML tags, he set the property data-sizing with px unit:
<input type="range" data-sizing="px">And he used it to create a suffix, which it's used to specify the unit values:
const suffix = this.dataset.sizing;Then he used the setProperty() to set CSS properties and change the variables values using String Template:
document.documentElement.style
.setProperty(`--${this.name}`, this.value + suffix);You can see and to interact with the final result here. 😉
That's all folks! 😃
Thanks WesBos to share this with us! 😊💖
written by @vanribeiro.