Skip to content

Commit 405197d

Browse files
JialeclJialecl
authored
Merge pull request #813 from dxc-technology/fix-811
[Minor] Added default value in slider
2 parents 02b7d6c + 6996342 commit 405197d

File tree

5 files changed

+80
-59
lines changed

5 files changed

+80
-59
lines changed

‎projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@
3030
<td></td>
3131
<td>Text to be placed above the slider.</td>
3232
</tr>
33+
<tr>
34+
<td>defaultValue: string</td>
35+
<td></td>
36+
<td>Initial value of the slider, only when it is uncontrolled.</td>
37+
</tr>
3338
<tr>
3439
<td>helperText: string</td>
3540
<td></td>

‎projects/dxc-ngx-cdk-site/src/assets/examples/slider.json‎

Lines changed: 45 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,47 @@
11
{
2-
"data": [
3-
{
4-
"title": "Uncontrolled Slider",
5-
"iframe": {
6-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider",
7-
"title": "uncontrolled-slider"
8-
},
9-
"visibility": true
10-
},
11-
{
12-
"title": "Continuous Slider",
13-
"iframe": {
14-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider",
15-
"title": "continuous-slider"
16-
}
17-
},
18-
{
19-
"title": "Slider with input",
20-
"iframe": {
21-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput",
22-
"title": "slider-with-input"
23-
}
24-
},
25-
{
26-
"title": "Controlled Slider",
27-
"iframe": {
28-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider",
29-
"title": "controlled-slider"
30-
}
31-
},
32-
{
33-
"title": "Sized Slider",
34-
"iframe": {
35-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/sized-slider/sized-slider.component.html&initialpath=sizedSlider",
36-
"title": "sized-slider"
37-
}
38-
},
39-
{
40-
"title": "Slider without limit values",
41-
"iframe": {
42-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-no-limit-values/slider-no-limit-values.component.html&initialpath=sliderNoLimitValues",
43-
"title": "slider-without-limits"
44-
}
45-
},
46-
{
47-
"title": "Disabled Slider",
48-
"iframe": {
49-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/disabled-slider/disabled-slider.component.html&initialpath=disabledSlider",
50-
"title": "disabled-slider"
51-
}
52-
},
53-
{
54-
"title": "Discrete Slider",
55-
"iframe": {
56-
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider",
57-
"title": "discrete-slider"
58-
}
59-
}
60-
]
2+
"data": [
3+
{
4+
"title": "Uncontrolled Slider",
5+
"iframe": {
6+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider",
7+
"title": "uncontrolled-slider"
8+
},
9+
"visibility": true
10+
},
11+
{
12+
"title": "Continuous Slider",
13+
"iframe": {
14+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider",
15+
"title": "continuous-slider"
16+
}
17+
},
18+
{
19+
"title": "Slider with input",
20+
"iframe": {
21+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput",
22+
"title": "slider-with-input"
23+
}
24+
},
25+
{
26+
"title": "Controlled Slider",
27+
"iframe": {
28+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider",
29+
"title": "controlled-slider"
30+
}
31+
},
32+
{
33+
"title": "Slider without limit values",
34+
"iframe": {
35+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-no-limit-values/slider-no-limit-values.component.html&initialpath=sliderNoLimitValues",
36+
"title": "slider-without-limits"
37+
}
38+
},
39+
{
40+
"title": "Discrete Slider",
41+
"iframe": {
42+
"src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider",
43+
"title": "discrete-slider"
44+
}
45+
}
46+
]
6147
}

‎projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,30 @@ describe("DxcSlider tests", () => {
4343
expect(onChangeFunction).toHaveBeenCalledWith(value);
4444
});
4545

46+
test("Uncontrolled dxc-slider with default value", async () => {
47+
const onChangeFunction = jest.fn();
48+
const value = 22;
49+
TestBed.overrideComponent(DxcSliderComponent, {
50+
set: { selector: "slider" },
51+
});
52+
const slider = await render(DxcSliderComponent, {
53+
componentProperties: {
54+
showLimitsValues: true,
55+
onChange: { emit: onChangeFunction } as any,
56+
showInput: true,
57+
defaultValue: 10,
58+
},
59+
imports: [MatSliderModule, DxcTextInputModule],
60+
});
61+
const input = <HTMLInputElement>slider.getByRole("textbox");
62+
expect(input.value).toBe("10");
63+
input.focus();
64+
fireEvent.click(input);
65+
fireEvent.input(input, { target: { value: value } });
66+
expect(onChangeFunction).toHaveBeenCalledWith(value);
67+
expect(input.value).toBe("22");
68+
});
69+
4670
test("Controlled dxc-slider", async () => {
4771
const onChangeFunction = jest.fn();
4872
const value = 22;

‎projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ export class DxcSliderComponent implements OnInit, OnChanges {
7676
* Text to be placed above the slider.
7777
*/
7878
@Input() label: string;
79+
/**
80+
* Initial value of the slider, only when it is uncontrolled.
81+
*/
82+
@Input() defaultValue?: number;
7983
/**
8084
* Helper text to be placed above the slider.
8185
*/
@@ -184,6 +188,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
184188
}
185189

186190
ngOnInit() {
191+
this.value = this.defaultValue ?? this.value;
187192
this.renderedValue = this.value;
188193

189194
if (this.labelFormatCallback) {

‎projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface SliderProperties {
88
showInput?: boolean;
99
value?: number;
1010
name?: string;
11+
defaultValue?: number;
1112
label?: string;
1213
helperText?: string;
1314
disabled?: boolean;

0 commit comments

Comments
 (0)