AngularJS code for the day...

...have no code at all:

<div ng-app ng-init="r=128; g=128; b=128;">
    <div class="block" style="background-color: rgb({{r}}, {{g}}, {{b}});"></div>
    <input type="range" min="0" max="255" step="1" ng-model="r">
    <input type="range" min="0" max="255" step="1" ng-model="g">
    <input type="range" min="0" max="255" step="1" ng-model="b">
    <p>Drag the sliders</p>
        
         
    R: {{r}}<br/>
    G: {{g}}<br/>
    B: {{b}}<br/>
</div>
 

Darn, HTML should be bolted with model from the get-go.

Live code: http://jsfiddle.net/Jpk7x/35/



Manually manipulating DOM elements makes me remember this classic physicist joke:


"It would be a poor thing to be an atom in a universe without
physicists. A physicist is an atom's way of knowing about atoms"


What physicists are to atom, front-end developers are to HTML.


"It would be a poor thing to be an HTML in a universe without
front-end developers. A front-end developer is an HTML’s way of making itself dynamic"


Poor us, the unsuspecting slaves of HTML, we think we are the master of them, but in fact it's the other way around. For non-clientside-mvc-mvvm-using front-end developers, we still have to manually manipulate DOM with our jQuery / document.getElementByBlah skills



Note: Try the jsfiddle example above on HTML5-capable browser only, e.g. Chrome



input type=range is rendered as slider on HTML5-capable browser.



If a browser doesn't recognize range, you can use other slider tags, Wijmo slider for example. Wijmo's AngularJS slider is just as code-less as its HTML5-cousin range:

http://demo.componentone.com/wijmo/using-angular/index.html