Pages UI
Search…
v5.0.1 - Pages Angular
Directives
Forms
Service
Sliders
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 disabledBoolean
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
Last modified 3yr ago
Copy link