Merge pull request #3039 from IgniteUI/fix-3036

fix(slider): update ngModel from input on blur #3036

Author: Konstantin Dinev

src/app/interactions/slider/slider-sample-1/slider-sample-1.component.html

@@ -11,14 +11,14 @@
         </igx-slider>
         <div class="wrapper">
             <igx-input-group type="border">
-                <label igxLabel for="lowerInput">Lower price:</label>
+                <label igxLabel for="lowerInput">Lower price (updates on blur):</label>
                 <igx-prefix>$</igx-prefix>
-                <input igxInput type="number" id="lowerInput" min="100" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" />
+                <input igxInput type="number" id="lowerInput" min="100" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" [ngModelOptions]="{ updateOn: 'blur' }" />
             </igx-input-group>
             <igx-input-group type="border">
-                <label igxLabel for="upperInput">Upper price:</label>
+                <label igxLabel for="upperInput">Upper price (updates on blur):</label>
                 <igx-prefix>$</igx-prefix>
-                <input igxInput type="number" id="upperInput" [min]="priceRange.lower" max="900" [(ngModel)]="priceRange.upper" />
+                <input igxInput type="number" id="upperInput" [min]="priceRange.lower" max="900" [(ngModel)]="priceRange.upper" [ngModelOptions]="{ updateOn: 'blur' }" />
             </igx-input-group>
         </div>
     </div>

src/app/interactions/slider/slider-sample-4/slider-sample-4.component.html

@@ -3,15 +3,15 @@
 
     <div class="row-container">
         <igx-input-group type="border">
-            <label igxLabel for="lowerRange">Lowest price</label>
+            <label igxLabel for="lowerRange">Lowest price (updates on blur):</label>
             <igx-prefix>$</igx-prefix>
-            <input igxInput id="lowerRange" type="number" min="0" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" />
+            <input igxInput id="lowerRange" type="number" min="0" [max]="priceRange.upper" [(ngModel)]="priceRange.lower" [ngModelOptions]="{ updateOn: 'blur' }" />
         </igx-input-group>
 
         <igx-input-group type="border">
-            <label igxLabel for="upperRange">Highest price</label>
+            <label igxLabel for="upperRange">Highest price (updates on blur):</label>
             <igx-prefix>$</igx-prefix>
-            <input igxInput id="upperRange" type="number" [min]="priceRange.lower" max="1000" [(ngModel)]="priceRange.upper" />
+            <input igxInput id="upperRange" type="number" [min]="priceRange.lower" max="1000" [(ngModel)]="priceRange.upper" [ngModelOptions]="{ updateOn: 'blur' }" />
         </igx-input-group>
     </div>
 </div>

src/app/interactions/slider/slider-styling-sample/app-slider-styling.component.html

@@ -6,5 +6,5 @@
         [primaryTicks]="3"
         [secondaryTicks]="4"
         [ticksOrientation]="ticksOrientation">
-        </igx-slider>
+    </igx-slider>
 </div>