Angular 2 slider component
Demo: http://bogdan1975.github.io/slider/
- 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