ng2-slider-component
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    ng2-slider-component

    Status: GitHub license

    Angular 2 slider component

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

    Dependencies

    Install

    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' 
        },
        
        .... 
        
    }

    Usage

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

    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:

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

    Events

    onRangeChanged

    Event onRangeChanged fired when range was changed

    Install

    npm i ng2-slider-component

    DownloadsWeekly Downloads

    186

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • targus