PrettySlider
Simple and pretty highly customizable Angular slider.
This library was generated with Angular CLI version 7.2.0.
This angular component library is planned to extends default angular slider and add mor slider handlers into the component.
For now, one component is added in this library
How to use?
- Include our
pretty-slider
module inapp.module.ts
; @
- Add the component
<pretty-slider>
where slide part is expected in your application
To brief the signatures of the components as below
[steps]
- number of step ticks into slider bar. steps - hold the default value of step ticks (max: 10). | type: number[value]
- minimum and maximum initial value of selected interval. value - value in seconds from 00:00 to 23:59. If it is not set, the default value will be [0, 1200]. | type: array[tooltips]
- define if tooltips open aways or not. tooltips - open | close type: string[interval]
- sets minimum space (range) between tick handlers when moving the mouse. | type: number(dragMoved)
- This callback will be triggered when user drag and drop the slider items in the component.
Sample implementation
app.module.ts
;; ;; @
app.component.html
Lets slide it!
app.component.ts
; @ public steps: number = 10; public tooltips: string = 'close'; public interval: number = 20; public rangeValue: number = 14320 80400; public buttonLabel: string = 'Reset'; { console; } > Thank you give a try Welcome!