I am using Angular 4, I can not extract the maximum and minimum value from a data slider (values), the thing is that when I get it in an input it appears but together as it is specified in the input of the slider data-slider -value. Please any suggestions to get the values together or separately, hopefully separated.
This is the hatml, where I have my form and the slider that I want to get the highest and lowest value. Also below I have an input where I pass the value, it works but passes both values, higher and lower and does not change when sliding the slide (it is static).
<!-- Filter-Form -->
<section id="filter_form2">
<div class="container">
<div class="main_bg white-text">
<h3>Busca Tu Auto Nuevo!</h3>
<div class="row">
<form (ngSubmit)="buscar($event)">
<div class="form-group col-md-3 col-sm-6">
<div class="form-group select">
<select class="form-control" [(ngModel)]="tipoAuto" name="tipoAuto">
<option value="0">Seleccione Tipo de Auto</option>
<option *ngFor="let c of categorias" id="{{c.id}}">{{c.nombre}}</option>
</select>
</div>
</div>
<div class="form-group col-md-6 col-sm-6">
<label class="form-label">Rango de Precios ($) </label>
<input [(ngModel)]="precioTipoAuto" #slider name="precioTipoAuto" id="price_range" type="text" class="span2" value="" data-slider-min="1000000" data-slider-max="300000000" data-slider-step="1" data-slider-value="[50000000,200000000]"/>
</div>
<div class="form-group col-md-3 col-sm-6">
<button type="submit" class="btn btn-block"><i class="fa fa-search" aria-hidden="true"></i> Buscar Auto</button>
</div>
<div class="col-md-6 col-sm-6 black-text">
<input type="text" id="precioMayor" value="{{precioTipoAuto.value}}">
</div>
</form>
</div>
</div>
</div>
</section>
<!-- /Filter-Form -->here is the .ts, where I try to get the data from the form, the search () is where it runs when I want to search auto, I print it in console.log and this only brings me the value of the select (extracts the data correctly), on the other hand, the priceAutoAuto comes to me as an undefined value (I already tried to change to string and array, the 2 types gave me an undefined in console).
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { RouterModule, Router, ActivatedRoute } from '@angular/router';
import { AutoService } from '../../auto/auto.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-home-form-busqueda',
templateUrl: './home-form-busqueda.component.html',
styleUrls: ['./home-form-busqueda.component.css'],
})
export class HomeFormBusquedaComponent implements OnInit {
@Output() emitEvent:EventEmitter<any> = new EventEmitter<any>();
buscarForm: FormGroup;
public categorias: any = [];
public errorMesage: string;
public tipoAuto: any = '';
public varTipoAuto: any = '';
public precioTipoAuto: any = [];
public varPrecioTipoAuto: any = [];
constructor(
private route: ActivatedRoute,
private router: Router,
private _autoService: AutoService
) { }
getCategorias() {
return this._autoService.getCategorias().subscribe(
data => {
this.categorias = data;
},
error => {
this.errorMesage = error;
}
);
}
buscar() {
this.varTipoAuto = this.tipoAuto;
this.varPrecioTipoAuto = this.precioTipoAuto.value;
console.log('Categoría: ' + this.varTipoAuto);
console.log(this.varPrecioTipoAuto);
}
ngOnInit() {
this.getCategorias();
}
}