https://github.com/zalari/md-color-slider

Simple Material design color slider directive for Angular.
https://github.com/zalari/md-color-slider

Last synced: 2 months 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 (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-04T10:33:20.000Z (about 9 years ago)
• Last Synced: 2024-11-10T00:02:38.440Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 41 KB
• Stars: 0
• Watchers: 3
• 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.

![preview](https://raw.githubusercontent.com/zalari/md-color-slider/master/md-color-slider.png)

## 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)