diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html
index 163577e82..4307e4ecc 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/slider/properties/slider-properties/slider-properties.component.html
@@ -30,6 +30,11 @@
|
Text to be placed above the slider. |
+
+ | defaultValue: string |
+ |
+ Initial value of the slider, only when it is uncontrolled. |
+
| helperText: string |
|
diff --git a/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json b/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json
index 64abfceb4..4555402a4 100644
--- a/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json
+++ b/projects/dxc-ngx-cdk-site/src/assets/examples/slider.json
@@ -1,61 +1,47 @@
{
- "data": [
- {
- "title": "Uncontrolled Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider",
- "title": "uncontrolled-slider"
- },
- "visibility": true
- },
- {
- "title": "Continuous Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider",
- "title": "continuous-slider"
- }
- },
- {
- "title": "Slider with input",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput",
- "title": "slider-with-input"
- }
- },
- {
- "title": "Controlled Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider",
- "title": "controlled-slider"
- }
- },
- {
- "title": "Sized Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/sized-slider/sized-slider.component.html&initialpath=sizedSlider",
- "title": "sized-slider"
- }
- },
- {
- "title": "Slider without limit values",
- "iframe": {
- "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",
- "title": "slider-without-limits"
- }
- },
- {
- "title": "Disabled Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/disabled-slider/disabled-slider.component.html&initialpath=disabledSlider",
- "title": "disabled-slider"
- }
- },
- {
- "title": "Discrete Slider",
- "iframe": {
- "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider",
- "title": "discrete-slider"
- }
- }
- ]
+ "data": [
+ {
+ "title": "Uncontrolled Slider",
+ "iframe": {
+ "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/uncontrolled-slider/uncontrolled-slider.component.html&initialpath=uncontrolledSlider",
+ "title": "uncontrolled-slider"
+ },
+ "visibility": true
+ },
+ {
+ "title": "Continuous Slider",
+ "iframe": {
+ "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/continuous-slider/continuous-slider.component.html&initialpath=continuousSlider",
+ "title": "continuous-slider"
+ }
+ },
+ {
+ "title": "Slider with input",
+ "iframe": {
+ "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/slider-with-input/slider-with-input.component.html&initialpath=sliderWithInput",
+ "title": "slider-with-input"
+ }
+ },
+ {
+ "title": "Controlled Slider",
+ "iframe": {
+ "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/controlled-slider/controlled-slider.component.html&initialpath=controlledSlider",
+ "title": "controlled-slider"
+ }
+ },
+ {
+ "title": "Slider without limit values",
+ "iframe": {
+ "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",
+ "title": "slider-without-limits"
+ }
+ },
+ {
+ "title": "Discrete Slider",
+ "iframe": {
+ "src": "https://stackblitz.com/edit/halstack-angular-examples-next?file=src/app/views/slider/discrete-slider/discrete-slider.component.html&initialpath=discreteSlider",
+ "title": "discrete-slider"
+ }
+ }
+ ]
}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts
index bca124f6d..a7493cd44 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.spec.ts
@@ -43,6 +43,30 @@ describe("DxcSlider tests", () => {
expect(onChangeFunction).toHaveBeenCalledWith(value);
});
+ test("Uncontrolled dxc-slider with default value", async () => {
+ const onChangeFunction = jest.fn();
+ const value = 22;
+ TestBed.overrideComponent(DxcSliderComponent, {
+ set: { selector: "slider" },
+ });
+ const slider = await render(DxcSliderComponent, {
+ componentProperties: {
+ showLimitsValues: true,
+ onChange: { emit: onChangeFunction } as any,
+ showInput: true,
+ defaultValue: 10,
+ },
+ imports: [MatSliderModule, DxcTextInputModule],
+ });
+ const input = slider.getByRole("textbox");
+ expect(input.value).toBe("10");
+ input.focus();
+ fireEvent.click(input);
+ fireEvent.input(input, { target: { value: value } });
+ expect(onChangeFunction).toHaveBeenCalledWith(value);
+ expect(input.value).toBe("22");
+ });
+
test("Controlled dxc-slider", async () => {
const onChangeFunction = jest.fn();
const value = 22;
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
index 694b07801..5338a10f5 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.component.ts
@@ -76,6 +76,10 @@ export class DxcSliderComponent implements OnInit, OnChanges {
* Text to be placed above the slider.
*/
@Input() label: string;
+ /**
+ * Initial value of the slider, only when it is uncontrolled.
+ */
+ @Input() defaultValue?: number;
/**
* Helper text to be placed above the slider.
*/
@@ -184,6 +188,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
}
ngOnInit() {
+ this.value = this.defaultValue ?? this.value;
this.renderedValue = this.value;
if (this.labelFormatCallback) {
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts
index 38333569a..cd23ada26 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-slider/dxc-slider.types.ts
@@ -8,6 +8,7 @@ export interface SliderProperties {
showInput?: boolean;
value?: number;
name?: string;
+ defaultValue?: number;
label?: string;
helperText?: string;
disabled?: boolean;