The magic line is the content: attr(data-value) '/' attr(max). It uses CSS attr() to pull out the data-value and max attributes; both set using markup on the <input>. As those values change, the generated content is automatically updated. Sick data binding bro.

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

@wiretapped: I only accept unicode-snowman-delimited data. ☃

Online drawing app

"wysihtml5 is an open source rich text editor based on HTML5 ... It uses a sophisticated security concept and aims to generate fully valid HTML5 markup"

Template for HTML games