Skip to content

Commit 304dde9

Browse files
hanastasovhanastasov
authored
Merge pull request #2995 from IgniteUI/slider-updates
feat(slider): updating samples
2 parents 9605579 + 1c12372 commit 304dde9

14 files changed

+77
-152
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,4 @@
118118
"typescript": "4.4.4",
119119
"webpack-bundle-analyzer": "^4.5.0"
120120
}
121-
}
121+
}

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<div class="sample-center">
22
<div class="container">
3-
<igx-slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [lowerBound]="100" [upperBound]="900" [(ngModel)]="priceRange"></igx-slider>
3+
<igx-slider id="slider"
4+
[type]="sliderType.RANGE"
5+
[minValue]="0"
6+
[maxValue]="1000"
7+
[lowerBound]="100"
8+
[upperBound]="900"
9+
[(lowerValue)]="priceRange.lower"
10+
[(upperValue)]="priceRange.upper">
11+
</igx-slider>
412
<div class="wrapper">
513
<igx-input-group type="border">
6-
<igx-prefix>USD</igx-prefix>
7-
<input #lowerInput igxInput type="number" id="lowerInput" [ngModel]="priceRange.lower" />
814
<label igxLabel for="lowerInput">Lower price:</label>
15+
<igx-prefix>$</igx-prefix>
16+
<input igxInput type="number" id="lowerInput" min="100" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" />
917
</igx-input-group>
1018
<igx-input-group type="border">
11-
<igx-prefix>USD</igx-prefix>
12-
<input #upperInput igxInput type="number" id="upperInput" [ngModel]="priceRange.upper" />
1319
<label igxLabel for="upperInput">Upper price:</label>
20+
<igx-prefix>$</igx-prefix>
21+
<input igxInput type="number" id="upperInput" [min]="priceRange.lower" max="900" [(ngModel)]="priceRange.upper" />
1422
</igx-input-group>
1523
</div>
1624
</div>

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
display: flex;
99
flex-direction: column;
1010
padding: 16px;
11-
max-width: 500px;
11+
width: 100%;
1212
}
1313

1414
.wrapper {

‎src/app/interactions/slider/slider-sample-1/slider-sample-1.component.ts

+7-73
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,18 @@
1-
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
2-
import { IgxInputDirective, IgxInputState, IgxSliderComponent, IgxSliderType } from 'igniteui-angular';
3-
import { fromEvent, Subject } from 'rxjs';
4-
import { takeUntil } from 'rxjs/operators';
1+
import { Component } from '@angular/core';
2+
import { IgxSliderType } from 'igniteui-angular';
53

64
@Component({
75
selector: 'app-slider-sample-1',
86
styleUrls: ['./slider-sample-1.component.scss'],
97
templateUrl: './slider-sample-1.component.html'
108
})
11-
export class SliderSample1Component implements OnInit, OnDestroy {
12-
13-
@ViewChild(IgxSliderComponent, { static: true })
14-
public slider: IgxSliderComponent;
15-
16-
@ViewChild('lowerInput', { read: IgxInputDirective, static: true })
17-
public lowerInput: IgxInputDirective;
18-
19-
@ViewChild('upperInput', { read: IgxInputDirective, static: true })
20-
public upperInput: IgxInputDirective;
9+
export class SliderSample1Component {
2110

2211
public sliderType = IgxSliderType;
23-
public priceRange: PriceRange = new PriceRange(200, 800);
24-
public $destroyer = new Subject<boolean>();
12+
public priceRange = {
13+
lower: 200,
14+
upper: 800
15+
};
2516

2617
constructor() { }
27-
28-
public ngOnInit() {
29-
fromEvent(this.lowerInput.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
30-
.subscribe((event) => {
31-
this.validate(this.lowerInput, event);
32-
});
33-
34-
fromEvent(this.lowerInput.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
35-
.subscribe((event) => {
36-
this.validate(this.lowerInput, event);
37-
});
38-
39-
fromEvent(this.upperInput.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
40-
.subscribe((event) => {
41-
this.validate(this.upperInput, event);
42-
});
43-
44-
fromEvent(this.upperInput.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
45-
.subscribe((event) => {
46-
this.validate(this.upperInput, event);
47-
});
48-
}
49-
50-
public ngOnDestroy() {
51-
this.$destroyer.next(true);
52-
}
53-
54-
public validate(input: IgxInputDirective, event) {
55-
const val = parseInt(input.value, 10);
56-
if (isNaN(val) || val > this.slider.upperBound || val < this.slider.lowerBound) {
57-
input.valid = IgxInputState.INVALID;
58-
} else {
59-
input.valid = IgxInputState.VALID;
60-
this.updatePriceRange(val, event.currentTarget);
61-
}
62-
}
63-
64-
public updatePriceRange(value, event) {
65-
const prevPriceRange = this.priceRange;
66-
switch (event.id) {
67-
case 'lowerInput': {
68-
this.priceRange = new PriceRange(value, prevPriceRange.upper);
69-
break;
70-
}
71-
case 'upperInput': {
72-
this.priceRange = new PriceRange(prevPriceRange.lower, value);
73-
break;
74-
}
75-
}
76-
}
77-
}
78-
class PriceRange {
79-
constructor(
80-
public lower: number,
81-
public upper: number
82-
) {
83-
}
8418
}

‎src/app/interactions/slider/slider-sample-3/slider-sample-3.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="sample-center">
22
<div class="container">
3-
<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
3+
<igx-slider [step]="10" [(ngModel)]="task.completion"></igx-slider>
44
<igx-input-group type="border">
5-
<input igxInput id="percentInput" type="number" [ngModel]="task.completion" />
5+
<input igxInput id="percentInput" type="number" min="0" max="100" step="10" [(ngModel)]="task.completion" />
66
<label igxLabel for="percentInput">Task Completion</label>
77
<igx-suffix>%</igx-suffix>
88
</igx-input-group>

‎src/app/interactions/slider/slider-sample-3/slider-sample-3.component.ts

+6-41
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,21 @@
1-
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
2-
import { IgxInputDirective, IgxInputState, IgxSliderComponent } from 'igniteui-angular';
3-
import { fromEvent, Subject } from 'rxjs';
4-
import { takeUntil } from 'rxjs/operators';
1+
import { Component, ViewChild } from '@angular/core';
2+
import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
53

64
@Component({
75
selector: 'app-slider-sample-3',
86
styleUrls: ['./slider-sample-3.component.scss'],
97
templateUrl: './slider-sample-3.component.html'
108
})
11-
export class SliderSample3Component implements OnInit, OnDestroy {
9+
export class SliderSample3Component {
1210
@ViewChild(IgxInputDirective, { static: true })
1311
public input: IgxInputDirective;
1412

1513
@ViewChild(IgxSliderComponent, { static: true })
1614
public slider: IgxSliderComponent;
1715

18-
public task: Task = new Task(10);
19-
20-
public $destroyer = new Subject<boolean>();
16+
public task = {
17+
completion: 10
18+
};
2119

2220
constructor() { }
23-
24-
public updateTask() {
25-
const val = parseInt(this.input.value, 10);
26-
if (isNaN(val) || val < this.slider.lowerBound || val > this.slider.upperBound || val % 10 > 0) {
27-
this.input.valid = IgxInputState.INVALID;
28-
} else {
29-
this.input.valid = IgxInputState.VALID;
30-
this.task.completion = val;
31-
}
32-
}
33-
34-
public ngOnInit() {
35-
fromEvent(this.input.nativeElement, 'input').pipe(takeUntil(this.$destroyer))
36-
.subscribe(() => {
37-
this.updateTask();
38-
});
39-
40-
fromEvent(this.input.nativeElement, 'blur').pipe(takeUntil(this.$destroyer))
41-
.subscribe(() => {
42-
this.updateTask();
43-
});
44-
}
45-
46-
public ngOnDestroy() {
47-
this.$destroyer.next(true);
48-
}
49-
}
50-
51-
class Task {
52-
constructor(
53-
public completion: number
54-
) {
55-
}
5621
}

‎src/app/interactions/slider/slider-sample-4/slider-sample-4.component.html

+16-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
11
<div class="container">
2-
<igx-slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange"></igx-slider>
3-
</div>
2+
<igx-slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(lowerValue)]="priceRange.lower" [(upperValue)]="priceRange.upper"></igx-slider>
3+
4+
<div class="row-container">
5+
<igx-input-group type="border">
6+
<label igxLabel for="lowerRange">Lowest price</label>
7+
<igx-prefix>$</igx-prefix>
8+
<input igxInput id="lowerRange" type="number" min="0" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" />
9+
</igx-input-group>
10+
11+
<igx-input-group type="border">
12+
<label igxLabel for="upperRange">Highest price</label>
13+
<igx-prefix>$</igx-prefix>
14+
<input igxInput id="upperRange" type="number" [min]="priceRange.lower" max="1000" [(ngModel)]="priceRange.upper" />
15+
</igx-input-group>
16+
</div>
17+
</div>

‎src/app/interactions/slider/slider-sample-4/slider-sample-4.component.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
.container {
22
margin: 55px 20px;
33
min-width: 200px;
4-
}
4+
}
5+
6+
.row-container {
7+
display: grid;
8+
column-gap: 12px;
9+
grid-template-columns: 50% 50%;
10+
}

‎src/app/interactions/slider/slider-sample-4/slider-sample-4.component.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,10 @@ import { IgxSliderType } from 'igniteui-angular';
88
})
99
export class SliderSample4Component {
1010
public sliderType = IgxSliderType;
11-
public priceRange: PriceRange = new PriceRange(200, 800);
11+
public priceRange = {
12+
lower: 200,
13+
upper: 800
14+
};
1215

1316
constructor() { }
1417
}
15-
16-
class PriceRange {
17-
constructor(
18-
public lower: number,
19-
public upper: number
20-
) {
21-
}
22-
}

‎src/app/interactions/slider/slider-sample-5/slider-sample-5.component.html

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
<div class="container">
2-
<igx-slider id="slider" [type]="sliderType.RANGE" [minValue]="0" [maxValue]="1000" [(ngModel)]="priceRange" [lowerBound]="100" [upperBound]="900"></igx-slider>
3-
</div>
2+
<igx-slider id="slider"
3+
[type]="sliderType.RANGE"
4+
[minValue]="0"
5+
[maxValue]="1000"
6+
[(lowerValue)]="priceRange.lower"
7+
[(upperValue)]="priceRange.upper"
8+
[lowerBound]="100"
9+
[upperBound]="900">
10+
</igx-slider>
11+
</div>

‎src/app/interactions/slider/slider-sample-5/slider-sample-5.component.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,10 @@ import { IgxSliderType } from 'igniteui-angular';
88
})
99
export class SliderSample5Component {
1010
public sliderType = IgxSliderType;
11-
public priceRange: PriceRange = new PriceRange(200, 800);
11+
public priceRange = {
12+
lower: 200,
13+
upper: 800
14+
};
1215

1316
constructor() { }
1417
}
15-
16-
class PriceRange {
17-
constructor(
18-
public lower: number,
19-
public upper: number
20-
) {
21-
}
22-
}

‎src/app/interactions/slider/slider-secondary-ticks-mirror/slider-secondary-ticks-mirror.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
[secondaryTicks]="21"
66
[primaryTickLabels]="false"
77
[ticksOrientation]="ticksOrientation">
8-
</igx-slider>
8+
</igx-slider>
99
</div>

‎src/app/interactions/slider/slider-tick-labels-template/tick-labels-template.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="container">
22
<igx-slider #slider4
3-
[step]="5"
4-
[showTicks]="true"
5-
[primaryTicks]="3"
6-
[secondaryTicks]="4">
3+
[step]="5"
4+
[showTicks]="true"
5+
[primaryTicks]="3"
6+
[secondaryTicks]="4">
77
<ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
88
{{ tickLabel(value, primary, idx) }}
99
</ng-template>

‎src/app/interactions/slider/slider-ticks-bottomtotop-labels/slider-ticks-bottomtotop-labels.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
[secondaryTicks]="4"
1010
[secondaryTickLabels]="false"
1111
[tickLabelsOrientation]="labelsOrientation">
12-
</igx-slider>
12+
</igx-slider>
1313
</div>
1414

0 commit comments

Comments
 (0)