ui-slider

Generation

ng g @ngx-kit/collection:ui-slider [name]

README

Hammerjs

Add Hammer.JS for proper working.

Demo

PreviewSources

Default slider

Range: from 0 to 10, step: 1, 5
Range: from -1000 to 1000, step: 2, value: 150
Range: from 50 to 150, step: 5, 75 (without fill)

Range slider

Range: from -1000 to 1600, step: 50, value: [ -150, 350 ]

API

[class] UiSliderDemoModule

@NgModule

[class] UiSliderModule

@NgModule

Exports:[ UiSliderComponent, ]

[class] UiSliderComponent

@Component

Selector:'ui-slider'

Members

SignatureDescription
@Input() min = 0
@Input() max = 100
@Input() step = 1
@Input() range = false

Range section mode. Model: [number, number]

@Input() fill = true

Fill space from start to pointer. Always true for range-mode.

mainPointerLeft: number
leftPointerLeft: number
fillLeft: number
fillRight: number
registerOnChange(fn: any)
registerOnTouched(fn: any)
setDisabledState(isDisabled: boolean): void
writeValue(rawValue: any): void
handleMove(event: any)