Слайдер

Slider - это компонент, обеспечивающий ввод значения с помощью перетаскивания маркера.

С чего начать

Подключите модуль

import { SliderModule } from 'primeng/slider';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-slider',
  templateUrl: './prime-slider.component.html',
  styleUrls: ['./prime-slider.component.scss']
})
export class PrimeSliderComponent implements OnInit {
 
  val1?: number;
  val2: number = 50;
  val3?: number;
  val4?: number;
  rangeValues: number[] = [20, 80];
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

Встройте компонент с помощью тэга p-slider.

Basic: val1

Input: val2

Step: val3

Range: rangeValues[0] + ' - ' + rangeValues[1]

Vertical: val4

Свойства

Name	Type	Default	Description
animate	boolean	false	When enabled, displays an animation on click of the slider bar.
disabled	boolean	false	When present, it specifies that the element should be disabled.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
orientation	string	horizontal	Orientation of the slider, valid values are horizontal and vertical.
step	number	1	Step factor to increment/decrement the value.
range	boolean	false	When specified, allows two boundary values to be picked.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
tabindex	number	0	Index of the element in tabbing order.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.

События

Name	Parameters	Description
onChange	event.originalEvent: Slide event<br>event.value: New value<br>event.values: Values in range mode<br>	Callback to invoke on value change via slide.
onSlideEnd	event.originalEvent: Mouseup event<br>event.value: New value	Callback to invoke when slide stops.

Стилизация

Name	Element
p-slider	Container element
p-slider-handle	Handle element

Skeleton SlideMenu