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

import { pgSliderModule } from '../@pages/components/slider/slider.module';
@NgModule({
  imports: [pgSliderModule,...]
})
export class AppModule(){}

How to use

Basic Slider with tooltip

HTML

<pg-slider [DefaultValue]="30" Tooltip="true" TooltipForceVisiblity="true"></pg-slider>

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