vincentRamiere/simpleat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mise en plave range TypeScript

Browse source
This commit is contained in:
Romain 2022-01-21 15:07:18 +01:00
parent 05f04db32b
commit 16b5f51e26
3 changed files with 126 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/pages/filters-page/filters-page.component.html
View file

@ -2,7 +2,6 @@
<div class="separation"></div> <div class="separation"></div>
<div class="accordion"> <div class="accordion">
<!-------------------------------------------------------------------------- Accordéon Distance --------------------------------------------------------------------------> <!-------------------------------------------------------------------------- Accordéon Distance -------------------------------------------------------------------------->
@ -18,7 +17,7 @@
<div class="distance p-3"> <div class="distance p-3">
<span>Veuillez sélectionner la distance souhaitée</span> <span>Veuillez sélectionner la distance souhaitée</span>
</div> </div>
<input type="range" class="form-range" min="0" max="4" id="customRange2"> <input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}" (change)="changeValueDistance($event)" >
<div class="valuesDistance d-flex d-flex justify-content-between"> <div class="valuesDistance d-flex d-flex justify-content-between">
<span>0 KM</span> <span>0 KM</span>
<span>2 KM</span> <span>2 KM</span>
@ -42,11 +41,11 @@
<div class="minMax p-3"> <div class="minMax p-3">
<span>Veuillez sélectionner le prix souhaité</span> <span>Veuillez sélectionner le prix souhaité</span>
</div> </div>
<input type="range" class="form-range" min="0" max="50" id="customRange2"> <input type="range" class="form-range" ng-model="valuePrix" min="{{minPrice}}" max="{{maxPrice}}" (change)="changeValuePrice($event)">
<div class="valuesPrix d-flex d-flex justify-content-between"> <div class="valuesPrix d-flex d-flex justify-content-between">
<span>0€</span> <span>0€</span>
<span>25€</span> <span>10€</span>
<span>50€</span> <span>20€</span>
</div> </div>
</div> </div>
</div> </div>
@ -68,8 +67,8 @@
<span>A Emporter</span> <span>A Emporter</span>
</div> </div>
<div class="PlaceEmporterCheck m-3 d-flex justify-content-around"> <div class="PlaceEmporterCheck m-3 d-flex justify-content-around">
<input class="surPlace-check-input" type="checkbox" id="inlineCheckbox1" value="surPlaceOption" style="width: 25px; height: 25px; border-radius: 300px;"> <input class="surPlace-check-input" type="checkbox" value="surPlaceOption" style="width: 25px; height: 25px; border-radius: 300px;">
<input class="Emporter-check-input" type="checkbox" id="inlineCheckbox2" value="aEmporterOption" style="width: 25px; height: 25px;"> <input class="Emporter-check-input" type="checkbox" value="aEmporterOption" style="width: 25px; height: 25px;">
</div> </div>
</div> </div>
</div> </div>
@ -90,8 +89,7 @@
<span>Accès PMR</span> <span>Accès PMR</span>
</div> </div>
<div class="pmr-check d-flex justify-content-center p-2"> <div class="pmr-check d-flex justify-content-center p-2">
<input class="pmr-check-input mx-auto" type="checkbox" value="" id="pmrIndeterminate" style="width: 25px; height: 25px;"> <input class="pmr-check-input mx-auto" type="checkbox" value="" style="width: 25px; height: 25px;">
<label class="pmr-check-label" for="pmrIndeterminate"></label>
</div> </div>
</div> </div>
</div> </div>

3
src/app/pages/filters-page/filters-page.component.scss
View file

@ -28,12 +28,11 @@ margin-bottom: 100px;
.accordion-body{ .accordion-body{
background-color: #F5F3F3; background-color: #F5F3F3;
text-align: center; text-align: center;
} }
.accordion-item{ .accordion-item{
margin-bottom: 70px; margin-bottom: 60px;
} }
.accordion-button{ .accordion-button{

34
src/app/pages/filters-page/filters-page.component.ts
View file

@ -7,9 +7,39 @@ import { Component, OnInit } from '@angular/core';
}) })
export class FiltersPageComponent implements OnInit { export class FiltersPageComponent implements OnInit {
constructor() { } minDistance : any;
maxDistance : any;
selectDistance : any;
ngOnInit(): void {
minPrice : any;
maxPrice: any;
selectPrice : any;
constructor() {
this.minDistance = 0;
this.maxDistance = 4;
this.selectDistance = 0;
this.minPrice = 0;
this.maxPrice = 20;
this.selectPrice = 0;
}
ngOnInit(): void {}
changeValueDistance(valueDistance: any){
this.selectDistance = valueDistance.target.value;
console.log(this.selectDistance);
}
changeValuePrice(valuePrice: any){
this.selectPrice = valuePrice.target.value;
console.log(this.selectPrice);
} }
} }