Pages UI
Search…
Sliders
pgSliders is a fork of NG-ZORRO implementation of drag slider. Initial credits go to the author

Importing

First import it to your app module or any submodule as you wish
1
import { pgSliderModule } from '../@pages/components/slider/slider.module';
2
@NgModule({
3
imports: [pgSliderModule,...]
4
})
5
export class AppModule(){}
Copied!

How to use

Basic Slider with tooltip
HTML
1
<pg-slider [DefaultValue]="30" Tooltip="true" TooltipForceVisiblity="true"></pg-slider>
Copied!

API

parameter
Description
Types of
Defaults
Range
Start the double slider mode when adding this property
attribute
-
Min
Minimum value
Number
0
Max
Maximum
Number
100
Step
Step size. The value must be greater than 0 and can be divisible by (max - min). When markswhen the object is not empty, can be set stepto nulluse this option only marks Slider values marked out portion.
Number
1
Marks
Tick ​​mark. key must be of type numberand value in the closed interval [min, max] within, each tab may be provided separately style.
object
{ number: string|HTML } or { number: { style: object, label: string|HTML } }
Dots
Whether it can only be dragged onto the scale
Boolean
false
of the Model
Set/get the current value. When rangeis false, the use number, or use[number, number]
number|number[]
DefaultValue
Set the initial value. When rangeis false, the use number, or use[number, number]
number|number[]
0 or [0, 0]
Included
Whether it is included. marksValid when not empty, when the value is true, the value is inclusive, and false is juxtaposed.
Boolean
true
Disabled
Whether to disable. Value true, the slider is disabled
Boolean
false
Vertical
Display vertically. When this property is added, the Slider is in the vertical direction.
attribute
-
OnAfterChange
And onmouseupconsistent with the timing of the trigger, the current value as an argument.
Function(value)
no
TipFormatter
Slider will pass the current value TipFormatter, and Tooltipdisplay TipFormatterthe return value, if it is null, is hidden Tooltip.
Function(value) | null
(value) => value
Copy link