[Minor] Added default value in slider

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

@@ -30,6 +30,11 @@
     <td></td>
     <td>Text to be placed above the slider.</td>
   </tr>
+  <tr>
+    <td>defaultValue: string</td>
+    <td></td>
+    <td>Initial value of the slider, only when it is uncontrolled.</td>
+  </tr>
   <tr>
     <td>helperText: string</td>
     <td></td>

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"
+      }
+    }
+  ]
 }

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 = <HTMLInputElement>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;

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) {

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;