https://github.com/zalari/md-color-slider
Simple Material design color slider directive for Angular.
https://github.com/zalari/md-color-slider
Last synced: about 1 year ago
JSON representation
Simple Material design color slider directive for Angular.
- Host: GitHub
- URL: https://github.com/zalari/md-color-slider
- Owner: zalari
- License: mit
- Created: 2015-12-03T10:20:19.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-04T10:33:20.000Z (over 10 years ago)
- Last Synced: 2025-07-12T21:54:31.235Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# md-color-slider
Simple Material design color slider for [AngularJS](https://github.com/angular/angular.js) using [Material Design for AngularJS](https://github.com/angular/material/).
No jQuery or TinyColor dependencies.
## Demo
Try the Demo on [Plunker](http://run.plnkr.co/UKGb9g2xz4vRiAiJ/).
## Install
### Bower:
```bash
bower install md-color-slider -S
```
## Usage
Include the stylesheet:
````html
````
Include the javascript:
````html
````
Add dependencies to your application (ngAnimate is optional)
````javascript
angular.module('myApp', ['ngMaterial','ngAnimate', 'mdColorSlider']);
````
Place the directive anywhere inside a ```md-input-container```:
````html
````
When using labels be sure to provide the css class ```md-icon-float``` to the ```md-input-container``` wrapper.
You can provide an classic input too:
````html
I'm labeled!
````
## Dependencies
- [Angular Material](https://material.angularjs.org)
- [ngAnimate](https://docs.angularjs.org/api/ngAnimate) (optional)