Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Bogdan1975/ng2-slider-component
Angular 2 slider component
https://github.com/Bogdan1975/ng2-slider-component
Last synced: about 1 month ago
JSON representation
Angular 2 slider component
- Host: GitHub
- URL: https://github.com/Bogdan1975/ng2-slider-component
- Owner: Bogdan1975
- License: mit
- Created: 2016-03-30T12:48:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-23T11:45:14.000Z (about 8 years ago)
- Last Synced: 2024-10-22T21:44:10.510Z (about 2 months ago)
- Language: TypeScript
- Size: 16.6 KB
- Stars: 68
- Watchers: 8
- Forks: 50
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-slider-component - Angular 2 slider component. (Uncategorized / Uncategorized)
- awesome-angular-components - ng2-slider-component - Angular 2 slider component. (Uncategorized / Uncategorized)
- awesome-angular-components - Bogdan1975/ng2-slider-component - Angular 2 slider component (UI Components / Form)
README
# ng2-slider-component
Status:
[]()
Angular 2 slider component
Demo: [http://bogdan1975.github.io/slider/](http://bogdan1975.github.io/slider/)
* [Dependencies](#dependencies)
* [Install](#install)
* [Usage](#usage)
- [Component](#component)
- [Events](#events)
# Dependencies
- [Angular 2](https://github.com/angular/angular)
- [SlideAble Directive Module](https://github.com/Bogdan1975/ng2-slideable-directive) `npm install ng2-slideable-directive`
- [Styled Directive Module](https://github.com/Bogdan1975/ng2-styled-directive) `npm install ng2-styled-directive`
# Install
You can get it on npm.
```shell
npm install ng2-slider-component
```
###`IMPORTANT!`
*.js files compiled for WebPack
If you use SystemJS, you have to use *.system.js files, they are compiled for SystemJS.
Fragment of SystemJS config:
```javascript
packages: {
....
'node_modules/ng2-slider-component': {
main: 'ng2-slider.component.system.js',
defaultExtension: 'system.js'
},
....
}
```
# Usage
```html
```
## Component
### `min`, `max`
This attributes set range of possible values
### `value`
This attribute set initial value and set simple mode. `startValue` and `endValue` will be ignored.
### `startValue`
This attribute set initial floor value. Ignored in `value` was set case.
### `endValue`
This attribute set initial ceil value and set range mode. Ignored in `value` was set case.
In case of this attribute is not set, mode will be set to simple
### `stepValue`
Attribute set step value
Default value: "1"
### `normalHandlerStyle`, `slidingHandlerStyle`
This attributes set styles of slider handles in normal and sliding modes
Example:
```html
```
## Events
### `onRangeChanged`
Event `onRangeChanged` fired when range was changed