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 767e76758..163577e82 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
@@ -25,10 +25,23 @@
     <td><code>1</code></td>
     <td>The step interval between values available for selection.</td>
   </tr>
+  <tr>
+    <td>label: string</td>
+    <td></td>
+    <td>Text to be placed above the slider.</td>
+  </tr>
+  <tr>
+    <td>helperText: string</td>
+    <td></td>
+    <td>Helper text to be placed above the slider.</td>
+  </tr>
   <tr>
     <td>value: number</td>
-    <td><code>0</code></td>
-    <td>The selected value.</td>
+    <td></td>
+    <td>
+      The selected value. If undefined, the component will be uncontrolled and
+      the value will be managed internally by the component.
+    </td>
   </tr>
   <tr>
     <td>marks: boolean</td>
@@ -61,35 +74,32 @@
     <td>If true, the component will be disabled.</td>
   </tr>
   <tr>
-    <td>labelFormatCallback: (value: number) => string | number</td>
+    <td>labelFormatCallback: function</td>
     <td></td>
-    <td>Function used to format minimum and maximum labels.</td>
-  </tr>
-  <tr>
-    <td>tabIndexValue: number</td>
-    <td><code>0</code></td>
-    <td>Value of the tabindex</td>
+    <td>
+      This function will be used to format the labels displayed next to the
+      slider. The value will be passed as parameter and the function must return
+      the formatted value.
+    </td>
   </tr>
   <tr>
-    <td>valueChange: EventEmitter</td>
+    <td>onChange: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the slider changes its value, as it's
-      being dragged. The new value will be passed as a parameter when this
-      function is executed.
+      This event will emit in case the slider changes its value, as it's being
+      dragged. The new value will be passed as a parameter.
     </td>
   </tr>
   <tr>
     <td>onDragEnd: EventEmitter</td>
     <td></td>
     <td>
-      This function will be called when the slider changes its value, but only
-      when the thumb is released. The new value will be passed as a parameter
-      when this function is executed.
+      This event will emit in case the slider changes its value, but only when
+      the thumb is released. The new value will be passed as a parameter.
     </td>
   </tr>
   <tr>
-    <td>margin: any (string | object)</td>
+    <td>margin: string | object</td>
     <td></td>
     <td>
       Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -99,10 +109,13 @@
     </td>
   </tr>
   <tr>
-    <td>size: string | object</td>
+    <td>size: string</td>
     <td><code>'fillParent'</code></td>
-    <td>
-      Size of the component ('medium' | 'large' | 'fillParent' | 'fitContent').
-    </td>
+    <td>Size of the component.</td>
+  </tr>
+  <tr>
+    <td>tabIndexValue: number</td>
+    <td><code>0</code></td>
+    <td>Value of the tabindex</td>
   </tr>
 </dxc-table>
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 68ce8007d..40ff4f49d 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
@@ -20,19 +20,46 @@ import {
 import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
 import { spaces } from "../variables";
 
+type Size = "medium" | "large" | "fillParent";
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-slider",
   templateUrl: "./dxc-slider.component.html",
-  providers: [CssUtils]
+  providers: [CssUtils],
 })
 export class DxcSliderComponent implements OnInit, OnChanges {
   @HostBinding("class") className;
   @HostBinding("class.disabled") isDisabled: boolean = false;
 
-  //Default values
+  /**
+   * The minimum value available for selection.
+   */
   @Input() minValue: number = 0;
+  /**
+   * The maximum value available for selection.
+   */
   @Input() maxValue: number = 100;
+  /**
+   * The step interval between values available for selection.
+   */
   @Input() step: number = 1;
+  /**
+   * Whether the min/max value labels should be displayed next to the slider.
+   */
   @Input()
   get showLimitsValues(): boolean {
     return this._showLimitsValues;
@@ -41,7 +68,9 @@ export class DxcSliderComponent implements OnInit, OnChanges {
     this._showLimitsValues = coerceBooleanProperty(value);
   }
   private _showLimitsValues = false;
-
+  /**
+   * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
+   */
   @Input()
   get showInput(): boolean {
     return this._showInput;
@@ -50,11 +79,25 @@ export class DxcSliderComponent implements OnInit, OnChanges {
     this._showInput = coerceBooleanProperty(value);
   }
   private _showInput = false;
-
+  /**
+   * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+   */
   @Input() value: number;
+  /**
+   * Name attribute of the input element.
+   */
   @Input() name: string;
+  /**
+   * Text to be placed above the slider.
+   */
   @Input() label: string;
+  /**
+   * Helper text to be placed above the slider.
+   */
   @Input() helperText: string;
+  /**
+   * If true, the component will be disabled.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
@@ -63,17 +106,23 @@ export class DxcSliderComponent implements OnInit, OnChanges {
     this._disabled = coerceBooleanProperty(value);
   }
   private _disabled;
-  @Input()
-  get required(): boolean {
-    return this._required;
-  }
-  set required(value: boolean) {
-    this._required = coerceBooleanProperty(value);
-  }
-  private _required;
-  @Input() margin: any;
-  @Input() size: string = 'fillParent';
+  /**
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+  /**
+   * Size of the component.
+   */
+  @Input() size: Size = "fillParent";
+  /**
+   * This function will be used to format the labels displayed next to the slider.
+   * The value will be passed as parameter and the function must return the formatted value.
+   */
   @Input() labelFormatCallback: (value: number) => string | number;
+  /**
+   * Value of the tabindex attribute.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
@@ -81,10 +130,17 @@ export class DxcSliderComponent implements OnInit, OnChanges {
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
-
-  @Output() onDragEnd: EventEmitter<any> = new EventEmitter<any>();
-  @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
+  private _tabIndexValue = 0;
+  /**
+   * This event will emit in case the slider changes its value, as it's being dragged.
+   * The new value will be passed as a parameter.
+   */ 
+  @Output() onChange: EventEmitter<number> = new EventEmitter<number>();
+  /**
+   * This event will emit in case the slider changes its value, but only when the thumb is released.
+   * The new value will be passed as a parameter.
+   */
+  @Output() onDragEnd: EventEmitter<number> = new EventEmitter<number>();
 
   tickInterval: any;
   renderedValue: number;
@@ -106,9 +162,8 @@ export class DxcSliderComponent implements OnInit, OnChanges {
     value: 0,
     name: null,
     disabled: false,
-    required: false,
     margin: null,
-    size: 'fillParent',
+    size: "fillParent",
     tabIndexValue: 0,
   });
 
@@ -120,7 +175,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
   };
 
   constructor(
-   @Self() private utils: CssUtils,
+    @Self() private utils: CssUtils,
     @Optional() public bgProviderService?: BackgroundProviderService
   ) {
     this.bgProviderService.$changeColor.subscribe((value) => {
@@ -163,8 +218,8 @@ export class DxcSliderComponent implements OnInit, OnChanges {
     this.maxValueClass = `${this.getMaxLabelContainerClass(inputs)}`;
   }
   /**
-   * Executed while  slider value moves or when user press a key in input
-   *  @param $event
+   * Executed while slider value moves or when user press a key in input
+   * @param $event
    */
   public valueChanged($event: any): void {
     let newValue = ($event.target ? $event.target.value : $event.value) * 1;
@@ -182,8 +237,7 @@ export class DxcSliderComponent implements OnInit, OnChanges {
   }
 
   /**
-   * controlled dxc-input behaviour
-   *
+   * Controlled dxc-input behaviour
    * @param $event
    */
   public inputValueChanged($event: any): void {
@@ -198,166 +252,161 @@ export class DxcSliderComponent implements OnInit, OnChanges {
   }
 
   /**
-   *  Eexecuted once the user has ended dragging
+   * Executed once the user has ended dragging
    * @param $event
    */
   public mouseUp($event): void {
     this.onDragEnd.emit(this.renderedValue);
   }
 
-    calculateWidth(sizes, inputs) {
-      if (inputs.size === "fillParent") {
-        return css`
-          width: calc(${sizes[inputs.size]} - ${this.getMargin(inputs.margin, "left")} - ${this.getMargin(inputs.margin, "right")});
-        `;
-      }
-        return css`
-          width: ${sizes[inputs.size]};
-        `;
+  calculateWidth(sizes, inputs) {
+    if (inputs.size === "fillParent") {
+      return css`
+        width: calc(
+          ${sizes[inputs.size]} - ${this.getMargin(inputs.margin, "left")} - ${this.getMargin(inputs.margin, "right")}
+        );
+      `;
     }
+    return css`
+      width: ${sizes[inputs.size]};
+    `;
+  }
 
   private getMargin(paddingOrMargin, side) {
     if (paddingOrMargin && typeof paddingOrMargin === "object") {
-      return paddingOrMargin[side] && spaces[paddingOrMargin[side]] || '0px';
+      return (paddingOrMargin[side] && spaces[paddingOrMargin[side]]) || "0px";
     }
     return (paddingOrMargin && spaces[paddingOrMargin]) || "0px";
-
   }
 
   getDynamicStyle(inputs) {
     return css`
+      .container {
+        display: flex;
+        flex-direction: column;
+        ${this.calculateWidth(this.sizes, inputs)}
+        ${this.utils.getMargins(inputs.margin)}
+      }
 
-    .container{
-      display: flex;
-      flex-direction: column;
-      ${this.calculateWidth(this.sizes, inputs)}
-      ${this.utils.getMargins(inputs.margin)}
-    }
-
-    .sliderLabel{
-      color:  var(--slider-labelFontColor);
-      font-family: var(--slider-labelFontFamily);
-      font-size: var(--slider-labelFontSize);
-      font-style: var(--slider-labelFontStyle);
-      font-weight: var(--slider-labelFontWeight);
-      line-height: var(--slider-labelLineHeight);
-
-    }
-
-    .sliderHelperText{
-      color:  var(--slider-helperTextFontColor);
-      font-family: var(--slider-helperTextFontFamily);
-      font-size: var(--slider-helperTextFontSize);
-      font-style: var(--slider-helperTextFontstyle);
-      font-weight: var(--slider-helperTextFontWeight);
-      line-height: var(--slider-helperTextLineHeight);
-    }
-
-
-    .sliderContainer{
-      display: flex;
-      height: 48px;
-      align-items: center;
-
-      .mat-slider-has-ticks .mat-slider-wrapper::after {
-        height: var(--slider-tickSize);
-        border-left-width: 2px;
-        top: var(--slider-tickVerticalPosition);
+      .sliderLabel {
+        color: var(--slider-labelFontColor);
+        font-family: var(--slider-labelFontFamily);
+        font-size: var(--slider-labelFontSize);
+        font-style: var(--slider-labelFontStyle);
+        font-weight: var(--slider-labelFontWeight);
+        line-height: var(--slider-labelLineHeight);
       }
 
-      &.disabled {
-        color: var(--slider-disabledFontColor) !important;
-        cursor: not-allowed;
-        input {
-          cursor: not-allowed;
-        }
+      .sliderHelperText {
+        color: var(--slider-helperTextFontColor);
+        font-family: var(--slider-helperTextFontFamily);
+        font-size: var(--slider-helperTextFontSize);
+        font-style: var(--slider-helperTextFontstyle);
+        font-weight: var(--slider-helperTextFontWeight);
+        line-height: var(--slider-helperTextLineHeight);
       }
-      mat-slider {
-        flex-grow: 1;
-        padding: 0px;
-        .mat-slider-track-fill {
-          height: 100%;
-        }
-        .mat-slider-ticks-container {
+
+      .sliderContainer {
+        display: flex;
+        height: 48px;
+        align-items: center;
+
+        .mat-slider-has-ticks .mat-slider-wrapper::after {
           height: var(--slider-tickSize);
+          border-left-width: 2px;
           top: var(--slider-tickVerticalPosition);
         }
-        .mat-slider-track-wrapper {
-          top: var(--slider-lineVerticalPosition);
-        }
-        .mat-slider-track-wrapper,
-        .mat-slider-track-background,
-        .mat-slider-wrapper {
-          height: var(--slider-lineThickness);
-        }
-        .mat-slider-focus-ring {
-          background-color: transparent;
-        }
-        .mat-slider-thumb {
-          transform: none !important;
-          width: var(--slider-thumbWidth);
-          height: var(--slider-thumbHeight);
-          bottom: var(--slider-thumbVerticalPosition);
-          &:hover{
-            width: calc(var(--slider-thumbWidth) + 4px);
-            height: calc(var(--slider-thumbHeight) + 4px);
-            bottom: calc(var(--slider-thumbVerticalPosition) - 2px);
-            background-color: var(--slider-hoverThumbBackgroundColor);
-              border-color: var(
-                --slider-hoverThumbBackgroundColor
-              ) !important;
+
+        &.disabled {
+          color: var(--slider-disabledFontColor) !important;
+          cursor: not-allowed;
+          input {
+            cursor: not-allowed;
           }
         }
-        &:not(.mat-slider-disabled) {
-          .mat-slider-ticks {
+        mat-slider {
+          flex-grow: 1;
+          padding: 0px;
+          .mat-slider-track-fill {
+            height: 100%;
+          }
+          .mat-slider-ticks-container {
             height: var(--slider-tickSize);
+            top: var(--slider-tickVerticalPosition);
           }
-          &.mat-slider-sliding {
-            .mat-slider-thumb {
-              cursor: grabbing;
-            }
+          .mat-slider-track-wrapper {
+            top: var(--slider-lineVerticalPosition);
           }
-          &:focus:not(.mat-slider-sliding) {
-            .mat-slider-thumb {
-              transform: none;
-              outline: -webkit-focus-ring-color auto 2px;
-              outline-offset: 3px;
-            }
-            .mat-slider-focus-ring {
-              width: 0px;
-              height: 0px;
-            }
+          .mat-slider-track-wrapper,
+          .mat-slider-track-background,
+          .mat-slider-wrapper {
+            height: var(--slider-lineThickness);
           }
-          &.mat-slider-has-ticks {
-            .mat-slider-ticks {
-              opacity: 1 !important;
-            }
+          .mat-slider-focus-ring {
+            background-color: transparent;
           }
-        }
-        &.mat-slider-disabled {
-          pointer-events: none;
           .mat-slider-thumb {
             transform: none !important;
-            bottom: var(--slider-disabledThumbVerticalPosition);
+            width: var(--slider-thumbWidth);
+            height: var(--slider-thumbHeight);
+            bottom: var(--slider-thumbVerticalPosition);
+            &:hover {
+              width: calc(var(--slider-thumbWidth) + 4px);
+              height: calc(var(--slider-thumbHeight) + 4px);
+              bottom: calc(var(--slider-thumbVerticalPosition) - 2px);
+              background-color: var(--slider-hoverThumbBackgroundColor);
+              border-color: var(--slider-hoverThumbBackgroundColor) !important;
+            }
           }
-          .mat-slider-ticks {
-            height: var(--slider-tickSize);
+          &:not(.mat-slider-disabled) {
+            .mat-slider-ticks {
+              height: var(--slider-tickSize);
+            }
+            &.mat-slider-sliding {
+              .mat-slider-thumb {
+                cursor: grabbing;
+              }
+            }
+            &:focus:not(.mat-slider-sliding) {
+              .mat-slider-thumb {
+                transform: none;
+                outline: -webkit-focus-ring-color auto 2px;
+                outline-offset: 3px;
+              }
+              .mat-slider-focus-ring {
+                width: 0px;
+                height: 0px;
+              }
+            }
+            &.mat-slider-has-ticks {
+              .mat-slider-ticks {
+                opacity: 1 !important;
+              }
+            }
           }
-          .mat-slider-ticks-container {
-            top: var(--slider-disabledTickVerticalPosition);
+          &.mat-slider-disabled {
+            pointer-events: none;
+            .mat-slider-thumb {
+              transform: none !important;
+              bottom: var(--slider-disabledThumbVerticalPosition);
+            }
+            .mat-slider-ticks {
+              height: var(--slider-tickSize);
+            }
+            .mat-slider-ticks-container {
+              top: var(--slider-disabledTickVerticalPosition);
+            }
           }
-        }
-        &.cdk-focused, &.mat-slider-sliding {
-          .mat-slider-thumb {
-            width: calc(var(--slider-thumbWidth) + 4px);
-            height: calc(var(--slider-thumbWidth) + 4px);
-            bottom: calc(var(--slider-thumbVerticalPosition) - 2px);
+          &.cdk-focused,
+          &.mat-slider-sliding {
+            .mat-slider-thumb {
+              width: calc(var(--slider-thumbWidth) + 4px);
+              height: calc(var(--slider-thumbWidth) + 4px);
+              bottom: calc(var(--slider-thumbVerticalPosition) - 2px);
+            }
           }
         }
       }
-    }
-
-
 
       dxc-text-input {
         margin-left: 2rem;
@@ -397,11 +446,11 @@ export class DxcSliderComponent implements OnInit, OnChanges {
           .mat-slider-thumb {
             background-color: var(--slider-thumbBackgroundColorOnDark);
             border-color: var(--slider-thumbBackgroundColorOnDark) !important;
-            &:hover{
+            &:hover {
               background-color: var(--slider-hoverThumbBackgroundColorOnDark);
-                border-color: var(
-                  --slider-hoverThumbBackgroundColorOnDark
-                ) !important;
+              border-color: var(
+                --slider-hoverThumbBackgroundColorOnDark
+              ) !important;
             }
           }
           .mat-slider-ticks {
@@ -450,7 +499,9 @@ export class DxcSliderComponent implements OnInit, OnChanges {
         }
         .mat-slider-track-fill {
           transform: translateX(2px) scale3d(0.5, 1, 1) !important;
-          background-color: var(--slider-disabledTrackLineColorOnDark) !important;
+          background-color: var(
+            --slider-disabledTrackLineColorOnDark
+          ) !important;
         }
         .mat-slider-ticks {
           background-image: repeating-linear-gradient(
@@ -497,17 +548,13 @@ export class DxcSliderComponent implements OnInit, OnChanges {
           &.mat-slider-sliding {
             .mat-slider-thumb {
               background-color: var(--slider-activeThumbBackgroundColor);
-              border-color: var(
-                --slider-activeThumbBackgroundColor
-              ) !important;
+              border-color: var(--slider-activeThumbBackgroundColor) !important;
             }
           }
           &:focus:not(.mat-slider-sliding) {
             .mat-slider-thumb {
               background-color: var(--slider-focusThumbBackgroundColor);
-              border-color: var(
-                --slider-focusThumbBackgroundColor
-              ) !important;
+              border-color: var(--slider-focusThumbBackgroundColor) !important;
               outline-color: var(--slider-focusColor);
             }
           }
@@ -532,8 +579,8 @@ export class DxcSliderComponent implements OnInit, OnChanges {
           background-image: repeating-linear-gradient(
             to right,
             var(--slider-disabledTickBackgroundColor),
-            var(--slider-disabledTickBackgroundColor)
-              var(--slider-tickSize) var(--slider-tickSize),
+            var(--slider-disabledTickBackgroundColor) var(--slider-tickSize)
+              var(--slider-tickSize),
             transparent 2px,
             #e2141400
           );