@syncfusion/ej2-inputs 20.4.52 → 21.1.35

package/src/rating/rating.d.ts

@@ -113,6 +113,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * Defines whether to show or hide the reset button in a rating component.
      * When set to "true", the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.
      *
+     * {% codeBlock src='rating/allowReset/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     allowReset: boolean;
@@ -155,6 +157,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     /**
      * Defines the template that defines the appearance of each rated item in a rating component.
      *
+     * {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
+     *
      * @default ''
      */
     fullTemplate: string;
@@ -175,6 +179,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * * Left
      * * Right
      *
+     * {% codeBlock src='rating/labelPosition/index.md' %}{% endcodeBlock %}
+     *
      * @isenumeration true
      * @default LabelPosition.Right
      * @asptype LabelPosition
@@ -183,6 +189,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     /**
      * Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.
      *
+     * {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
+     *
      * @default ''
      */
     labelTemplate: string;
@@ -204,6 +212,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * * Quarter
      * * Exact
      *
+     * {% codeBlock src='rating/precision/index.md' %}{% endcodeBlock %}
+     *
      * @isenumeration true
      * @default PrecisionType.Full
      * @asptype PrecisionType
@@ -220,6 +230,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * Defines a value that specifies whether to display a label that shows the current value of a rating.
      * When set to "true", a label will be displayed that shows the current value of the rating; otherwise false.
      *
+     * {% codeBlock src='rating/showLabel/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     showLabel: boolean;
@@ -234,6 +246,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * Defines the template that used as tooltip content over default tooltip content of the rating.
      * The current value of rating passed as context to build the content.
      *
+     * {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
+     *
      * @default ''
      */
     tooltipTemplate: string;
@@ -243,6 +257,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
      * The "value" is a decimal value that ranges from the minimum value to the items count,
      * as specified by the "min" and "itemsCount" properties of the rating.
      *
+     * {% codeBlock src='rating/value/index.md' %}{% endcodeBlock %}
+     *
      * @default 0.0
      * @aspType double
      */
@@ -257,6 +273,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     /**
      * Event callback that is raised before rendering each item.
      *
+     * {% codeBlock src='rating/beforeItemRenderEvent/index.md' %}{% endcodeBlock %}
+     *
      * @event beforeItemRender
      */
     beforeItemRender: EmitType<RatingItemEventArgs>;
@@ -269,12 +287,16 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     /**
      * Event callback that is raised when a user hovers over an item.
      *
+     * {% codeBlock src='rating/onItemHoverEvent/index.md' %}{% endcodeBlock %}
+     *
      * @event onItemHover
      */
     onItemHover: EmitType<RatingHoverEventArgs>;
     /**
      * Event callback that is raised when the value is changed.
      *
+     * {% codeBlock src='rating/valueChangedEvent/index.md' %}{% endcodeBlock %}
+     *
      * @event valueChanged
      */
     valueChanged: EmitType<RatingChangedEventArgs>;
@@ -290,6 +312,7 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     private emptyTemplateFunction;
     private fullTemplateFunction;
     private tooltipOpen;
+    private isReact?;
     /**
      * Constructor for creating the widget
      *
@@ -311,7 +334,6 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     private removeItemContent;
     private updateTooltip;
     private updateMinValue;
-    private updatePrecision;
     private validateValue;
     private getRatingValue;
     private updateItemValue;
@@ -336,6 +358,8 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     /**
      * Reset’s the value to minimum.
      *
+     * {% codeBlock src='rating/reset/index.md' %}{% endcodeBlock %}
+     *
      * @returns {void}
      */
     reset(): void;

package/src/rating/rating.js

@@ -106,7 +106,6 @@ var Rating = /** @class */ (function (_super) {
     function Rating(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.itemElements = [];
-        _this.tooltipOpen = false;
         return _this;
     }
     Rating.prototype.preRender = function () {
@@ -120,13 +119,14 @@ var Rating = /** @class */ (function (_super) {
             uparrow: 'uparrow',
             space: 'space'
         };
+        this.tooltipOpen = false;
     };
     Rating.prototype.render = function () {
         this.initialize();
         this.updateMinValue();
         this.updateTemplateFunction();
+        this.triggerChange(null, this.value, false);
         this.renderItems();
-        this.updatePrecision();
         this.displayLabel();
     };
     Rating.prototype.initialize = function () {
@@ -139,36 +139,42 @@ var Rating = /** @class */ (function (_super) {
         attributes(this.element, { 'aria-label': 'rating' });
         this.renderItemList();
         this.updateReset();
-        this.updateDisabled();
-        this.wrapper.classList[this.readOnly ? 'add' : 'remove'](READONLY);
-        this.wrapper.classList[!this.visible ? 'add' : 'remove'](HIDDEN);
-        this.wrapper.classList[this.enableRtl ? 'add' : 'remove'](RTL);
-        this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);
+        if (this.readOnly) {
+            this.wrapper.classList.add(READONLY);
+        }
+        if (!this.visible) {
+            this.wrapper.classList.add(HIDDEN);
+        }
+        if (this.enableRtl) {
+            this.wrapper.classList.add(RTL);
+        }
+        if (this.enableAnimation) {
+            this.wrapper.classList.add(ANIMATION);
+        }
         if (this.cssClass) {
             addClass([this.wrapper], this.cssClass.split(' '));
         }
         this.updateTooltip();
         this.wireKeyboardEvent();
+        this.updateDisabled();
     };
     Rating.prototype.updateDisabled = function () {
         this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED);
         attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        this.updateResetButton();
     };
     Rating.prototype.updateResetButton = function () {
-        var isDisabled = (this.value <= this.min) || this.disabled;
-        this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED);
-        attributes(this.resetElement, { 'aria-label': 'resetbutton', 'role': 'button',
-            'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });
+        if (this.allowReset) {
+            var isDisabled = (this.value <= this.min) || this.disabled;
+            this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED);
+            attributes(this.resetElement, { 'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });
+        }
     };
     Rating.prototype.renderItemList = function () {
         var _this = this;
         this.ratingItemList = this.createElement('div', {
             className: ITEMLIST,
-            id: this.element.id + '_item-list',
-            attrs: { 'tabindex': '0' }
+            id: this.element.id + '_item-list'
         });
         attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });
         this.wrapper.appendChild(this.ratingItemList);
@@ -217,7 +223,7 @@ var Rating = /** @class */ (function (_super) {
             var ratingItemContainer = this.createElement('span', { className: ITEMCONTAINER });
             var spanItem = this.createElement('span', { className: 'e-rating-item' });
             var ratingValue = this.getRatingValue(this.value, i);
-            this.renderItemContent(spanItem, ratingValue, i);
+            this.renderItemContent(spanItem, ratingValue, i, false);
             ratingItemContainer.appendChild(spanItem);
             this.wireItemsEvents(ratingItemContainer, i + 1);
             this.itemElements.push(ratingItemContainer);
@@ -227,12 +233,9 @@ var Rating = /** @class */ (function (_super) {
             });
         }
         attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });
-        if (this.disabled) {
-            attributes(this.ratingItemList, { 'tabindex': '-1' });
-        }
+        this.updateItemValue(false);
     };
     Rating.prototype.renderItemContent = function (spanEle, val, index, isrerender) {
-        if (isrerender === void 0) { isrerender = false; }
         if (isrerender) {
             this.removeItemContent(spanEle);
         }
@@ -271,17 +274,12 @@ var Rating = /** @class */ (function (_super) {
         }
     };
     Rating.prototype.updateMinValue = function () {
-        this.min = this.validateValue(this.min);
+        this.setProperties({ min: this.validateValue(this.min) }, true);
         if (this.min > 0 && this.value < this.min) {
             this.triggerChange(null, this.min, false);
         }
         attributes(this.ratingItemList, { 'aria-valuemin': this.min.toString() });
     };
-    Rating.prototype.updatePrecision = function () {
-        this.min = this.validateValue(this.min);
-        this.triggerChange(null, this.validateValue(this.value), false);
-        this.updateItemValue();
-    };
     Rating.prototype.validateValue = function (currentValue) {
         if (currentValue > this.itemsCount) {
             currentValue = this.itemsCount;
@@ -300,7 +298,11 @@ var Rating = /** @class */ (function (_super) {
         return (this.enableSingleSelection) ? (((value > i) && (value <= i + 1)) ? 1 : 0) :
             (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
     };
-    Rating.prototype.updateItemValue = function () {
+    Rating.prototype.updateItemValue = function (isUpdate) {
+        if (isUpdate === void 0) { isUpdate = true; }
+        if (isUpdate && this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         for (var i = 0; i < this.itemsCount; i++) {
             var itemElement = this.itemElements[parseInt(i.toString(), 10)];
             itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);
@@ -314,13 +316,16 @@ var Rating = /** @class */ (function (_super) {
             else if ((this.precision === PrecisionType.Full) && (i + 1 <= this.value) && (!this.enableSingleSelection)) {
                 itemElement.classList.add(SELECTEDVALUE);
             }
-            this.updateItemContent(ratingValue, i);
+            if (isUpdate) {
+                this.updateItemContent(ratingValue, i);
+            }
             itemElement.style.setProperty(RATINGVALUE, (ratingValue * 100) + '%');
             itemElement.classList[((this.value === 0) && (i === 0)) || (this.value === i + 1) || ((ratingValue > 0) && (ratingValue < 1)) ? 'add' : 'remove']('e-rating-focus');
         }
-        if (this.allowReset) {
-            this.updateResetButton();
+        if (isUpdate) {
+            this.renderReactTemplates();
         }
+        this.updateResetButton();
         attributes(this.ratingItemList, { 'aria-valuenow': this.currentValue.toString() });
         attributes(this.element, { 'value': this.value.toString() });
     };
@@ -330,26 +335,31 @@ var Rating = /** @class */ (function (_super) {
         }
         var spanEle = this.itemElements[parseInt(index.toString(), 10)].querySelector('.e-rating-item');
         if (this.fullTemplate && ratingValue === 1) {
-            if (spanEle.classList.contains(FULLTEMPLATE)) {
+            if (!this.isReact && spanEle.classList.contains(FULLTEMPLATE)) {
                 return;
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(FULLTEMPLATE);
-            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate)[0]);
         }
         else if (this.emptyTemplate) {
+            if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {
+                return;
+            }
             this.removeItemContent(spanEle);
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate)[0]);
         }
         else {
             this.removeItemContent(spanEle);
             addClass([spanEle], ICONCSS.split(' '));
         }
-        this.renderReactTemplates();
     };
     Rating.prototype.updateTooltipContent = function (isChange) {
         if (this.showTooltip) {
+            if (this.isReact) {
+                this.clearTemplate(['ratingTooltipTemplate']);
+            }
             var content = void 0;
             if (this.tooltipTemplate) {
                 var templateFunction = this.getTemplateString(this.tooltipTemplate);
@@ -395,21 +405,27 @@ var Rating = /** @class */ (function (_super) {
     Rating.prototype.updateLabel = function () {
         if (this.showLabel) {
             if (this.labelTemplate) {
+                if (this.isReact) {
+                    this.clearTemplate(['ratingLabelTemplate']);
+                }
                 if (this.spanLabel.firstChild) {
                     this.spanLabel.removeChild(this.spanLabel.firstChild);
                 }
                 var templateFunction = this.getTemplateString(this.labelTemplate);
                 this.spanLabel.append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate)[0]);
+                this.renderReactTemplates();
             }
             else {
                 this.spanLabel.textContent = this.currentValue + ' / ' + this.itemsCount;
             }
-            this.renderReactTemplates();
         }
     };
     Rating.prototype.updateReset = function () {
         if (this.allowReset) {
-            this.resetElement = this.createElement('span', { className: RESET });
+            this.resetElement = this.createElement('span', {
+                className: RESET,
+                attrs: { 'aria-label': 'resetbutton', 'role': 'button' }
+            });
             this.updateResetButton();
             EventHandler.add(this.resetElement, 'click', this.resetClicked, this);
             this.wrapper.insertBefore(this.resetElement, this.ratingItemList);
@@ -448,9 +464,7 @@ var Rating = /** @class */ (function (_super) {
         this.triggerChange(e, this.currentValue);
         this.updateItemValue();
         this.updateLabel();
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        this.updateResetButton();
     };
     Rating.prototype.updateValueChange = function (e, val, isInteracted) {
         if (isInteracted === void 0) { isInteracted = true; }
@@ -528,6 +542,8 @@ var Rating = /** @class */ (function (_super) {
     /**
      * Reset’s the value to minimum.
      *
+     * {% codeBlock src='rating/reset/index.md' %}{% endcodeBlock %}
+     *
      * @returns {void}
      */
     Rating.prototype.reset = function () {
@@ -580,12 +596,13 @@ var Rating = /** @class */ (function (_super) {
                     Math.round(0.1 * 10) / 10;
             currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;
             this.updateValueChange(e, (currentValue));
-            if (this.allowReset) {
-                this.updateResetButton();
-            }
+            this.updateResetButton();
         }
     };
     Rating.prototype.updateContent = function () {
+        if (this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         for (var i = 0; i < this.itemsCount; i++) {
             var itemElement = this.itemElements[parseInt(i.toString(), 10)].firstElementChild;
             this.renderItemContent(itemElement, this.getRatingValue(this.value, i), i, true);
@@ -624,6 +641,7 @@ var Rating = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         // unwires the events and detach the li elements
         this.removeItemElements();
+        this.clearTemplate();
         if (this.spanLabel) {
             remove(this.spanLabel);
             this.spanLabel = null;
@@ -702,7 +720,9 @@ var Rating = /** @class */ (function (_super) {
                     this.updateTooltip();
                     break;
                 case 'precision':
-                    this.updatePrecision();
+                    this.updateMinValue();
+                    this.triggerChange(null, this.value, false);
+                    this.updateItemValue();
                     this.updateLabel();
                     break;
                 case 'enableSingleSelection':
@@ -723,7 +743,6 @@ var Rating = /** @class */ (function (_super) {
                 case 'itemsCount':
                     this.removeItemElements();
                     this.renderItems();
-                    this.updateItemValue();
                     this.updateLabel();
                     break;
             }

package/src/slider/slider-model.d.ts

@@ -15,6 +15,7 @@ export interface TicksDataModel {
      *  * both - Ticks are placed on the both side of the Slider bar.
      *  * none - Ticks are not shown.
      * {% codeBlock src='slider/placement/index.md' %}{% endcodeBlock %}
+     *
      * @default 'None'
      */
     placement?: Placement;
@@ -22,6 +23,7 @@ export interface TicksDataModel {
     /**
      * It is used to denote the distance between two major (large) ticks from the scale of the Slider.
      * {% codeBlock src='slider/largestep/index.md' %}{% endcodeBlock %}
+     *
      * @default 10
      */
     largeStep?: number;
@@ -29,12 +31,14 @@ export interface TicksDataModel {
     /**
      * It is used to denote the distance between two minor (small) ticks from the scale of the Slider.
      * {% codeBlock src='slider/smallstep/index.md' %}{% endcodeBlock %}
+     *
      * @default 1
      */
     smallStep?: number;
 
     /**
      * We can show or hide the small ticks in the Slider, which will be appeared in between the largeTicks.
+     *
      * @default false
      */
     showSmallTicks?: boolean;
@@ -54,18 +58,21 @@ export interface ColorRangeDataModel {
 
     /**
      * It is used to set the color in the slider bar.
+     *
      * @default ''
      */
     color?: string;
 
     /**
      * It is used to get the starting value for applying color.
+     *
      * @default null
      */
     start?: number;
 
     /**
      * It is used to get the end value for applying color.
+     *
      * @default null
      */
     end?: number;
@@ -79,30 +86,35 @@ export interface LimitDataModel {
 
     /**
      * It is used to enable the limit in the slider.
+     *
      * @default false
      */
     enabled?: boolean;
 
     /**
      * It is used to set the minimum start limit value.
+     *
      * @default null
      */
     minStart?: number;
 
     /**
      * It is used to set the minimum end limit value.
+     *
      * @default null
      */
     minEnd?: number;
 
     /**
      * It is used to set the maximum start limit value.
+     *
      * @default null
      */
     maxStart?: number;
 
     /**
      * It is used to set the maximum end limit value.
+     *
      * @default null
      */
     maxEnd?: number;
@@ -110,6 +122,7 @@ export interface LimitDataModel {
     /**
      * It is used to lock the first handle.
      * {% codeBlock src='slider/limitStartHandleFixed/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     startHandleFixed?: boolean;
@@ -117,6 +130,7 @@ export interface LimitDataModel {
     /**
      * It is used to lock the second handle.
      * {% codeBlock src='slider/limitEndHandleFixed/index.md' %}{% endcodeBlock %}
+     *
      * @default false
      */
     endHandleFixed?: boolean;
@@ -131,6 +145,7 @@ export interface TooltipDataModel {
     /**
      * It is used to customize the Tooltip which accepts custom CSS class names that define
      *  specific user-defined styles and themes to be applied on the Tooltip element.
+     *
      * @default ''
      */
     cssClass?: string;
@@ -148,6 +163,7 @@ export interface TooltipDataModel {
      * If it is in desktop, it will show the Tooltip content when hovering on the target element.
      * If it is in touch device. It will show the Tooltip content when tap and holding on the target element.
      * {% codeBlock src='slider/tooltipShowOn/index.md' %}{% endcodeBlock %}
+     *
      * @default 'Auto'
      */
     showOn?: TooltipShowOn;
@@ -176,6 +192,7 @@ export interface SliderModel extends ComponentModel{
      * The value should be specified in array of number when render Slider type as range.
      *
      * {% codeBlock src="slider/value-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default null
      * @isGenericType true
      */
@@ -184,23 +201,26 @@ export interface SliderModel extends ComponentModel{
     /**
      * Specifies an array of slider values in number or string type.
      * The min and max step values are not considered.
+     *
      * @default null
      */
     customValues?: string[] | number[];
 
     /**
      * Specifies the step value for each value change when the increase / decrease
-     *  button is clicked or on arrow keys press or on dragging the thumb. 
+     *  button is clicked or on arrow keys press or on dragging the thumb.
      *  Refer the documentation [here](../../slider/ticks#step)
      *  to know more about this property.
      *
      * {% codeBlock src="slider/step-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 1
      */
     step?: number;
 
     /**
      * Specifies the width of the Slider.
+     *
      * @default null
      */
     width?: number | string;
@@ -209,6 +229,7 @@ export interface SliderModel extends ComponentModel{
      * Gets/Sets the minimum value of the slider.
      *
      * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 0
      */
     min?: number;
@@ -217,6 +238,7 @@ export interface SliderModel extends ComponentModel{
      * Gets/Sets the maximum value of the slider.
      *
      * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default 100
      */
     max?: number;
@@ -224,6 +246,7 @@ export interface SliderModel extends ComponentModel{
     /**
      * Specifies whether the render the slider in read-only mode to restrict any user interaction.
      * The slider rendered with user defined values and can’t be interacted with user actions.
+     *
      * @default false
      */
     readonly?: boolean;
@@ -234,6 +257,8 @@ export interface SliderModel extends ComponentModel{
      *  * minRange - Allows to select a single value in the Slider. It display’s a shadow from the start to the current value.
      *  * range - Allows to select a range of values in the Slider. It displays shadow in-between the selection range.
      * {% codeBlock src='slider/types/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'Default'
      */
     type?: SliderType;
 
@@ -248,6 +273,7 @@ export interface SliderModel extends ComponentModel{
      *  to know more about this property with demo.
      * {% codeBlock src='slider/ticks/index.md' %}{% endcodeBlock %}
      * {% codeBlock src="slider/ticks-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { placement: 'before' }
      */
     ticks?: TicksDataModel;
@@ -258,12 +284,14 @@ export interface SliderModel extends ComponentModel{
      *  to know more about this property.
      *
      * {% codeBlock src="slider/limits-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { enabled: false }
      */
     limits?: LimitDataModel;
 
     /**
-     * Enables or Disables the slider.
+     * Enable or Disable the slider.
+     *
      * @default true
      */
     enabled?: boolean;
@@ -272,31 +300,35 @@ export interface SliderModel extends ComponentModel{
      * Specifies the visibility, position of the tooltip over the slider element.
      *
      * {% codeBlock src="slider/tooltip-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default { placement: 'Before', isVisible: false, showOn: 'Focus', format: null }
      */
     tooltip?: TooltipDataModel;
 
     /**
-     * Specifies whether to show or hide the increase/decrease buttons 
+     * Specifies whether to show or hide the increase/decrease buttons
      * of Slider to change the slider value.
      * Refer the documentation [here](../../slider/getting-started#buttons)
      *  to know more about this property.
      *
      * {% codeBlock src="slider/showButtons-api/index.ts" %}{% endcodeBlock %}
+     *
      * @default false
      */
     showButtons?: boolean;
 
     /**
-     * Enables/Disables the animation for slider movement.
+     * Enable or Disable the animation for slider movement.
+     *
      * @default true
      */
     enableAnimation?: boolean;
 
     /**
      *  Specifies whether to render the slider in vertical or horizontal orientation.
-     *  Refer the documentation [here](../../slider/getting-started#orientation)
+     *  Refer the documentation [here](../../slider/orientation/)
      *  to know more about this property.
+     *
      * @default 'Horizontal'
      */
     orientation?: SliderOrientation;
@@ -304,18 +336,21 @@ export interface SliderModel extends ComponentModel{
     /**
      * Specifies the custom classes to be added to the element used to customize the slider.
      * {% codeBlock src='slider/cssClass/index.md' %}{% endcodeBlock %}
+     *
      * @default ''
      */
     cssClass?: string;
 
     /**
      * Defines whether to allow the cross-scripting site or not.
+     *
      * @default false
      */
     enableHtmlSanitizer?: boolean;
 
     /**
      * Triggers when the Slider is successfully created.
+     *
      * @event
      */
     created?: EmitType<Object>;
@@ -336,7 +371,7 @@ export interface SliderModel extends ComponentModel{
     changed?: EmitType<SliderChangeEventArgs>;
 
     /**
-     * Triggers on rendering the ticks element in the Slider, 
+     * Triggers on rendering the ticks element in the Slider,
      * which is used to customize the ticks labels dynamically.
      * {% codeBlock src='slider/renderingticksEvent/index.md' %}{% endcodeBlock %}
      * @event