https://github.com/Bogdan1975/ng2-slider-component

Angular 2 slider component
https://github.com/Bogdan1975/ng2-slider-component

Last synced: 3 months 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 (almost 9 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 (3 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:

[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)]()

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