Componente deslizante angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente deslizante en Angular PrimeNG.

Propiedades:

• animar: se utiliza para mostrar una animación al hacer clic en la barra deslizante, es de un tipo de datos booleano, el valor predeterminado es falso.
• disabled: Especifica que el elemento debe estar deshabilitado, es de tipo de dato booleano, el valor por defecto es false.
• min: se utiliza para establecer el valor límite mínimo, es de tipo de datos numéricos, el valor predeterminado es 0.
• max: se utiliza para establecer el valor límite máximo, es de tipo de datos numéricos, el valor predeterminado es 100.
• orientación:  Se utiliza para establecer la orientación del control deslizante, los valores válidos son horizontal y vertical, es de tipo de datos de string, el valor predeterminado es horizontal.
• paso: Se utiliza para configurar el factor para incrementar/decrementar el valor, es de tipo de dato numérico, el valor predeterminado es 1.
• rango: se utiliza para especificar dos valores de límite que se seleccionarán, es del tipo de datos booleano, el valor predeterminado es falso.
• estilo: Se utiliza para establecer el estilo en línea del elemento, es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass: se utiliza para establecer la clase de estilo del elemento, es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabelledBy: Es la propiedad ariaLabelledBy que establece relaciones entre el componente y la(s) etiqueta(s) donde su valor debe ser uno o más ID de elementos, es de tipo string de datos, el valor por defecto es nulo.
• tabindex: Se utiliza para establecer el índice del elemento en orden de tabulación, es de tipo de datos de número, el valor predeterminado es 0.

Evento: 

• onChange: es una devolución de llamada que se activa al cambiar el valor a través de la diapositiva.
• onSlideEnd: es una devolución de llamada que se dispara cuando la diapositiva se detiene.

Estilo:

• p-slider: es un elemento contenedor de estilo
• p-slider-handle: Es un elemento Handle de estilo

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto : Se verá como lo siguiente.

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Slider. 

<h5>PrimeNG Slider component</h5>
<p-slider [(ngModel)]="val1"></p-slider>
<p-slider [(ngModel)]="val2" orientation="vertical"></p-slider>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SliderModule } from 'primeng/slider';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SliderModule,
    InputTextModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  val1: number;
  val2: number;
  rangeValues: number[] = [20, 80];
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad max en el componente deslizante. 

<h5>Basic Slider: </h5>
<p-slider [(ngModel)]="basic"></p-slider>
  
<h5>Input Slider:</h5>
<input type="text" pInputText [(ngModel)]="inp" />
<p-slider [(ngModel)]="inp"></p-slider>
  
<h5>Step Slider:</h5>
<p-slider [(ngModel)]="step" [step]="15"></p-slider>
  
<h5>Range Slider:</h5>
<p-slider [(ngModel)]="range" [range]="true"></p-slider>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  basic: number;
  
  inp: number = 50;
  
  step: number;
  
  range: number[] = [20, 80];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SliderModule } from 'primeng/slider';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            SliderModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/slider