Range and Color inputs in Angular JS

This is my first blog post about Angular since I've been working a lot on it. Data binding using ng-model or setting the min or max value via expression do not work in ordinary HTML5 elements. Since now there is no support for color or range input therefore if a web app requires these form elements then the best way is to use plugins for them.
The plugins I use and often prefer are AngularJS Touch Slider and Angular Bootstrap Color Picker. These two plugins have IE9 support which is better than native elements and do not have any dependencies but Angular.

Recommended: HTML5 inputs: number, range and color - need to know stuff

AngularJS Touch Slider

After testing the waters I found this range slider to be the best, since this one has no dependency of jQuery and works on touch screens. You can customize it quite easily and can use bind data using Angular model and then output via view.

Demo Github

This is how MVC works

This range slider uses specific attributes which works as min and max attributes for input. Include rzsider.min.css and rzslider.min.js in your HTML file. No need of jQuery as I mentioned. You need to add rzslider tag with attribute rz-slider-model. This attribute binds your data to controller.

// In your controller
$scope.mySlider = {
    min: 100,
    max: 180,
    ceil: 500,
    floor: 0
};

<rzslider
    rz-slider-floor="mySlider.floor"
    rz-slider-ceil="mySlider.ceil"
    rz-slider-model="mySlider.min"
    rz-slider-high="mySlider.max"></rzslider>

Now this data have min, max, ceil and floor values which are quite basic. Often range sliders have 2 sliding points these can be bind with min or max while floor is the minimum value in slider and ceil is the maximum value in slider.

If you wanted a single pointer slider which slides between two end points than simply add ceil, floor and min because if there is no max property defined then single pointer slider is rendered.

Angular Bootstrap Colorpicker

Color input is there in HTML5 but no support by Angular till now. The best way to tackle out is to use a plugin. Angular Bootstrap Colorpicker. This plugin do not have jQuery dependency, just include colorpicker.css and bootstrap-colorpicker-module.js in your HTML file to workout. Do not forget to add dependency in Angular module.

Demo Github

The best thing about this plugin is the different output color formats, this includes rgba which let you set alpha opacity that is simply not available in native color input.

<input colorpicker="rgba" type="text" ng-model="your_model" />

The above will let you select alpha opacity in color picker and will return rgba value. I am simply obsessed with it. Not only inputs, but you can trigger color picker on button click.

<div colorpicker ng-model="your_model"></div>

Conclusion

Since now Angular do not have range and color inputs, these two plugins I use often to tackle the situation. I want to hear more about it, mention in comments.