Status:

Angular 2 slider component

Demo: http://bogdan1975.github.io/slider/

• Dependencies
• Install
• Usage
  • Component
  • Events

• Angular 2
• SlideAble Directive Module npm install ng2-slideable-directive
• Styled Directive Module npm install ng2-styled-directive

You can get it on npm.

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:

packages: {

    ....
    
    'node_modules/ng2-slider-component': {
            main: 'ng2-slider.component.system.js',
            defaultExtension: 'system.js' 
    },
    
    .... 
    
}

<ng2-slider 
    min="6"
    max="23"
    startValue="9"
    endValue="21"
    stepValue="2"
    [normalHandlerStyle]="{ 'background-color': 'green'}"
    [slidingHandlerStyle]="{
          'border-radius': '9px',
          'background-color': 'red'
    }">
</ng2-slider>

This attributes set range of possible values

This attribute set initial value and set simple mode. startValue and endValue will be ignored.

This attribute set initial floor value. Ignored in value was set case.

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

Attribute set step value

Default value: "1"

This attributes set styles of slider handles in normal and sliding modes

Example:

<ng2-slider min="3"
    max="33"
    value="7"
    stepValue="1"
    [normalHandlerStyle]="{ 'background-color': 'blue'}"
    [slidingHandlerStyle]="{
          'border-radius': '9px',
          'background-color': 'orange'
    }" >
</ng2-slider>

Event onRangeChanged fired when range was changed