From 4bac0ce928ee6a33e702c5848ff1a7e92ad39044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maro=C5=A1=20Valter?= <maros.valter@gmail.com>
Date: Thu, 24 Sep 2020 20:04:47 +0200
Subject: [PATCH 1/6] Enable slider values update from code

---
 src/MatBlazor.Demo/Demo/DemoMatSlider.razor   | 52 ++++++++--
 src/MatBlazor.Web/src/matSlider/matSlider.js  | 69 +++++++++-----
 .../Components/Base/BaseMatInputComponent.cs  |  3 +-
 .../Components/MatSlider/BaseMatSlider.cs     | 94 ++++++++++++++++++-
 4 files changed, 181 insertions(+), 37 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
index 3be302f0..c861d8a9 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
@@ -23,7 +23,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val""></MatSlider>
 
         @code
@@ -70,7 +70,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val2"" ValueMin=""-10"" ValueMax=""20""></MatSlider>
 
         @code
@@ -118,7 +118,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val3"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -165,7 +165,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val4"" Step=""5"" EnableStep=""true"" ValueMin=""0"" ValueMax=""100"" Markers=""true"" Pin=""true"" TValue=""int"" Discrete=""true""></MatSlider>
 
         @code
@@ -213,7 +213,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val5"" Immediate=""true"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -243,7 +243,7 @@
         <MatSlider Disabled="true" Value="55"></MatSlider>
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider Disabled=""true"" Value=""55""></MatSlider>
     ")></BlazorFiddle>
     </SourceContent>
@@ -267,7 +267,7 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider TValue=""decimal"" ValueChanged=""@OnValueChanged""></MatSlider>
 
         @code
@@ -283,3 +283,41 @@
     ")></BlazorFiddle>
     </SourceContent>
 </DemoContainer>
+
+<h5 class="mat-h5">Value update</h5>
+<DemoContainer>
+    <Content>
+        <MatTextField @bind-Value="@Value" Label="Value"></MatTextField>
+        <MatTextField @bind-Value="@ValueMin" Label="ValueMin"></MatTextField>
+        <MatTextField @bind-Value="@ValueMax" Label="ValueMax"></MatTextField>
+        <MatSlider TValue="decimal" Value="@Value" ValueMin="@ValueMin" ValueMax="@ValueMax"></MatSlider>
+
+        @code
+        {
+
+            public decimal Value { get; set; } = 50;
+            public decimal ValueMin { get; set; } = 0;
+            public decimal ValueMax { get; set; } = 100;
+
+        }
+
+    </Content>
+    <SourceContent>
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
+        <MatTextField @bind-Value=""@Value"" Label=""Value""></MatTextField>
+        <MatTextField @bind-Value=""@ValueMin"" Label=""ValueMin""></MatTextField>
+        <MatTextField @bind-Value=""@ValueMax"" Label=""ValueMax""></MatTextField>
+        <MatSlider TValue=""decimal"" Value=""@Value"" ValueMin=""@ValueMin"" ValueMax=""@ValueMax""></MatSlider>
+
+        @code
+        {
+
+            public decimal Value { get; set; } = 50;
+            public decimal ValueMin { get; set; } = 0;
+            public decimal ValueMax { get; set; } = 100;
+
+        }
+
+    ")></BlazorFiddle>
+    </SourceContent>
+</DemoContainer>
\ No newline at end of file
diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js
index 4a5a4431..5a64ad26 100644
--- a/src/MatBlazor.Web/src/matSlider/matSlider.js
+++ b/src/MatBlazor.Web/src/matSlider/matSlider.js
@@ -1,40 +1,59 @@
 import { MDCSlider } from '@material/slider';
 
+export let sliders = {}
+
 export class MatSlider {
+    OnChange(jsHelper) {
+        try {
+            jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value)
+                .then(r => {
+                    // console.log(r);
+                });
+        } catch (e) {
+            debugger;
+            throw e;
+        }
+    }
 
     constructor(ref, jsHelper, immediate) {
         this.slider = new MDCSlider(ref);
 
-        this.slider.listen('MDCSlider:change', () => {
-            //                        debugger;
-            try {
-                jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value)
-                    .then(r => {
-                        // console.log(r);
-                    });
-            } catch (e) {
-                debugger;
-                throw e;
-            }
-        });
+        this.slider.listen('MDCSlider:change', () => this.OnChange(jsHelper));
         if (immediate) {
-            this.slider.listen('MDCSlider:input', () => {
-                //                        debugger;
-                try {
-                    jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value)
-                        .then(r => {
-                            // console.log(r);
-                        });
-                } catch (e) {
-                    debugger;
-                    throw e;
-                }
-            });
+            this.slider.listen('MDCSlider:input', () => this.OnChange(jsHelper));
         }
     }
 }
 
 
 export function init(ref, jsHelper, immediate) {
-    new MatSlider(ref, jsHelper, immediate);
+    sliders[ref] = new MatSlider(ref, jsHelper, immediate);
+}
+
+export function updateValue(ref, value) {
+    if (!sliders[ref]) {
+        return;
+    }
+    sliders[ref].slider.value = value;
+}
+
+export function updateValueMin(ref, value) {
+    if (!sliders[ref]) {
+        return;
+    }
+    sliders[ref].slider.min = value;
 }
+
+export function updateValueMax(ref, value) {
+    if (!sliders[ref]) {
+        return;
+    }
+    sliders[ref].slider.max = value;
+}
+
+export function updateStep(ref, value) {
+    if (!sliders[ref]) {
+        return;
+    }
+    sliders[ref].slider.step = value;
+}
\ No newline at end of file
diff --git a/src/MatBlazor/Components/Base/BaseMatInputComponent.cs b/src/MatBlazor/Components/Base/BaseMatInputComponent.cs
index 9b4bf723..8d2e46ef 100644
--- a/src/MatBlazor/Components/Base/BaseMatInputComponent.cs
+++ b/src/MatBlazor/Components/Base/BaseMatInputComponent.cs
@@ -43,8 +43,9 @@ public T Value
             get => _value;
             set
             {
-                OnValueChanged(!EqualityComparer<T>.Default.Equals(_value, value));
+                var old = _value;
                 _value = value;
+                OnValueChanged(!EqualityComparer<T>.Default.Equals(old, value));
             }
         }
 
diff --git a/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs b/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs
index 5f2ce71d..ddf1a439 100644
--- a/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs
+++ b/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs
@@ -1,6 +1,7 @@
 ﻿using System;
-using System.Threading.Tasks;
+using System.Collections.Generic;
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace MatBlazor
 {
@@ -10,6 +11,10 @@ namespace MatBlazor
     /// <typeparam name="TValue">sbyte, byte, short, ushort, int, uint, long, ulong, char, float, double, decimal, decimal?</typeparam>
     public class BaseMatSlider<TValue> : BaseMatInputComponent<TValue>
     {
+        private TValue valueMin;
+        private TValue valueMax;
+        private TValue step;
+
         protected MatDotNetObjectReference<MatSliderJsHelper> jsHelper;
 
         public BaseMatSlider()
@@ -36,6 +41,24 @@ private void Value_OnChangeEvent(object sender, decimal e)
             CurrentValue = SwitchT.FromDecimal(e);
         }
 
+        protected override void OnValueChanged(bool changed)
+        {
+            if (changed && Rendered)
+            {
+                InvokeAsync(async () =>
+                {
+                    try
+                    {
+                        await Js.InvokeVoidAsync("matBlazor.matSlider.updateValue", Ref, Value);
+                    }
+                    catch (Exception e)
+                    {
+                        Console.WriteLine(e.Message);
+                    }
+                });
+            }
+        }
+
         public override void Dispose()
         {
             base.Dispose();
@@ -44,10 +67,52 @@ public override void Dispose()
 
 
         [Parameter]
-        public TValue ValueMin { get; set; }
+        public TValue ValueMin
+        {
+            get => valueMin;
+            set
+            {
+                if (!EqualityComparer<TValue>.Default.Equals(valueMin, value) && Rendered)
+                {
+                    InvokeAsync(async () =>
+                    {
+                        try
+                        {
+                            await Js.InvokeVoidAsync("matBlazor.matSlider.updateValueMin", Ref, value);
+                        }
+                        catch (Exception e)
+                        {
+                            Console.WriteLine(e.Message);
+                        }
+                    });
+                }
+                valueMin = value;
+            }
+        }
 
         [Parameter]
-        public TValue ValueMax { get; set; }
+        public TValue ValueMax
+        {
+            get => valueMax;
+            set
+            {
+                if (!EqualityComparer<TValue>.Default.Equals(valueMax, value) && Rendered)
+                {
+                    InvokeAsync(async () =>
+                    {
+                        try
+                        {
+                            await Js.InvokeVoidAsync("matBlazor.matSlider.updateValueMax", Ref, value);
+                        }
+                        catch (Exception e)
+                        {
+                            Console.WriteLine(e.Message);
+                        }
+                    });
+                }
+                valueMax = value;
+            }
+        }
 
         [Parameter]
         public bool Discrete { get; set; }
@@ -62,7 +127,28 @@ public override void Dispose()
         public bool Pin { get; set; }
 
         [Parameter]
-        public TValue Step { get; set; }
+        public TValue Step
+        {
+            get => step;
+            set
+            {
+                if (!EqualityComparer<TValue>.Default.Equals(step, value) && Rendered)
+                {
+                    InvokeAsync(async () =>
+                    {
+                        try
+                        {
+                            await Js.InvokeVoidAsync("matBlazor.matSlider.updateStep", Ref, value);
+                        }
+                        catch (Exception e)
+                        {
+                            Console.WriteLine(e.Message);
+                        }
+                    });
+                }
+                step = value;
+            }
+        }
 
         [Parameter]
         public bool EnableStep { get; set; }

From 2e701d21c05c53b1b3086b6a06a6d68920aba62e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maro=C5=A1=20Valter?= <maros.valter@gmail.com>
Date: Thu, 24 Sep 2020 20:23:17 +0200
Subject: [PATCH 2/6] Add catch to slider js Update demo example

---
 src/MatBlazor.Demo/Demo/DemoMatSlider.razor  | 14 ++++++++++++--
 src/MatBlazor.Web/src/matSlider/matSlider.js | 14 +++++---------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
index c861d8a9..f867fea8 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
@@ -290,7 +290,7 @@
         <MatTextField @bind-Value="@Value" Label="Value"></MatTextField>
         <MatTextField @bind-Value="@ValueMin" Label="ValueMin"></MatTextField>
         <MatTextField @bind-Value="@ValueMax" Label="ValueMax"></MatTextField>
-        <MatSlider TValue="decimal" Value="@Value" ValueMin="@ValueMin" ValueMax="@ValueMax"></MatSlider>
+        <MatSlider TValue="decimal" Value="@Value" ValueMin="@ValueMin" ValueMax="@ValueMax" ValueChanged="@OnValueChanged2"></MatSlider>
 
         @code
         {
@@ -299,6 +299,11 @@
             public decimal ValueMin { get; set; } = 0;
             public decimal ValueMax { get; set; } = 100;
 
+            public void OnValueChanged2(decimal val)
+            {
+                Value = val;
+            }
+
         }
 
     </Content>
@@ -307,7 +312,7 @@
         <MatTextField @bind-Value=""@Value"" Label=""Value""></MatTextField>
         <MatTextField @bind-Value=""@ValueMin"" Label=""ValueMin""></MatTextField>
         <MatTextField @bind-Value=""@ValueMax"" Label=""ValueMax""></MatTextField>
-        <MatSlider TValue=""decimal"" Value=""@Value"" ValueMin=""@ValueMin"" ValueMax=""@ValueMax""></MatSlider>
+        <MatSlider TValue=""decimal"" Value=""@Value"" ValueMin=""@ValueMin"" ValueMax=""@ValueMax"" ValueChanged=""@OnValueChanged2""></MatSlider>
 
         @code
         {
@@ -316,6 +321,11 @@
             public decimal ValueMin { get; set; } = 0;
             public decimal ValueMax { get; set; } = 100;
 
+            public void OnValueChanged2(decimal val)
+            {
+                Value = val;
+            }
+
         }
 
     ")></BlazorFiddle>
diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js
index 5a64ad26..463d8c71 100644
--- a/src/MatBlazor.Web/src/matSlider/matSlider.js
+++ b/src/MatBlazor.Web/src/matSlider/matSlider.js
@@ -4,15 +4,11 @@ export let sliders = {}
 
 export class MatSlider {
     OnChange(jsHelper) {
-        try {
-            jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value)
-                .then(r => {
-                    // console.log(r);
-                });
-        } catch (e) {
-            debugger;
-            throw e;
-        }
+        jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value)
+            .then(r => {
+                // console.log(r);
+            })
+            .catch(e => console.error(e));
     }
 
     constructor(ref, jsHelper, immediate) {

From a1feda8f080bbf3bc3cd3cec604d731f73c7f536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maro=C5=A1=20Valter?= <maros.valter@gmail.com>
Date: Wed, 7 Oct 2020 20:02:16 +0200
Subject: [PATCH 3/6] Fix MatSlider map key in JS

---
 src/MatBlazor.Web/src/matSlider/matSlider.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js
index 463d8c71..a073a166 100644
--- a/src/MatBlazor.Web/src/matSlider/matSlider.js
+++ b/src/MatBlazor.Web/src/matSlider/matSlider.js
@@ -23,33 +23,33 @@ export class MatSlider {
 
 
 export function init(ref, jsHelper, immediate) {
-    sliders[ref] = new MatSlider(ref, jsHelper, immediate);
+    sliders[ref.id] = new MatSlider(ref, jsHelper, immediate);
 }
 
 export function updateValue(ref, value) {
-    if (!sliders[ref]) {
+    if (!sliders[ref.id]) {
         return;
     }
-    sliders[ref].slider.value = value;
+    sliders[ref.id].slider.value = value;
 }
 
 export function updateValueMin(ref, value) {
-    if (!sliders[ref]) {
+    if (!sliders[ref.id]) {
         return;
     }
-    sliders[ref].slider.min = value;
+    sliders[ref.id].slider.min = value;
 }
 
 export function updateValueMax(ref, value) {
-    if (!sliders[ref]) {
+    if (!sliders[ref.id]) {
         return;
     }
-    sliders[ref].slider.max = value;
+    sliders[ref.id].slider.max = value;
 }
 
 export function updateStep(ref, value) {
-    if (!sliders[ref]) {
+    if (!sliders[ref.id]) {
         return;
     }
-    sliders[ref].slider.step = value;
+    sliders[ref.id].slider.step = value;
 }
\ No newline at end of file

From 9b2a54836583ad5fc2c9bed40e0467d714cfbe87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maro=C5=A1=20Valter?= <maros.valter@gmail.com>
Date: Wed, 7 Oct 2020 20:15:02 +0200
Subject: [PATCH 4/6] Revert code styling cleanup

---
 src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
index f867fea8..522f7ab6 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
@@ -23,7 +23,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val""></MatSlider>
 
         @code
@@ -70,7 +70,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val2"" ValueMin=""-10"" ValueMax=""20""></MatSlider>
 
         @code
@@ -118,7 +118,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val3"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -165,7 +165,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val4"" Step=""5"" EnableStep=""true"" ValueMin=""0"" ValueMax=""100"" Markers=""true"" Pin=""true"" TValue=""int"" Discrete=""true""></MatSlider>
 
         @code
@@ -213,7 +213,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val5"" Immediate=""true"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -243,7 +243,7 @@
         <MatSlider Disabled="true" Value="55"></MatSlider>
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider Disabled=""true"" Value=""55""></MatSlider>
     ")></BlazorFiddle>
     </SourceContent>
@@ -267,7 +267,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider TValue=""decimal"" ValueChanged=""@OnValueChanged""></MatSlider>
 
         @code
@@ -308,7 +308,7 @@
 
     </Content>
     <SourceContent>
-        <BlazorFiddle Template="MatBlazor" Code=@(@"
+      <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatTextField @bind-Value=""@Value"" Label=""Value""></MatTextField>
         <MatTextField @bind-Value=""@ValueMin"" Label=""ValueMin""></MatTextField>
         <MatTextField @bind-Value=""@ValueMax"" Label=""ValueMax""></MatTextField>

From 0bd41e27a05fff76adc146596522c0eac87e9958 Mon Sep 17 00:00:00 2001
From: MarosValter <marosko1705@gmail.com>
Date: Wed, 7 Oct 2020 20:30:53 +0200
Subject: [PATCH 5/6] Update DemoMatSlider.razor

Revert style cleanup changes
---
 src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
index 522f7ab6..1407a119 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
@@ -23,7 +23,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val""></MatSlider>
 
         @code
@@ -70,7 +70,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val2"" ValueMin=""-10"" ValueMax=""20""></MatSlider>
 
         @code
@@ -118,7 +118,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val3"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -165,7 +165,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val4"" Step=""5"" EnableStep=""true"" ValueMin=""0"" ValueMax=""100"" Markers=""true"" Pin=""true"" TValue=""int"" Discrete=""true""></MatSlider>
 
         @code
@@ -213,7 +213,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider @bind-Value=""@Val5"" Immediate=""true"" Discrete=""true"" Pin=""true"" TValue=""int"" ValueMin=""0"" ValueMax=""50""></MatSlider>
 
         @code
@@ -243,7 +243,7 @@
         <MatSlider Disabled="true" Value="55"></MatSlider>
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider Disabled=""true"" Value=""55""></MatSlider>
     ")></BlazorFiddle>
     </SourceContent>
@@ -267,7 +267,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatSlider TValue=""decimal"" ValueChanged=""@OnValueChanged""></MatSlider>
 
         @code
@@ -308,7 +308,7 @@
 
     </Content>
     <SourceContent>
-      <BlazorFiddle Template="MatBlazor" Code=@(@"
+    	<BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatTextField @bind-Value=""@Value"" Label=""Value""></MatTextField>
         <MatTextField @bind-Value=""@ValueMin"" Label=""ValueMin""></MatTextField>
         <MatTextField @bind-Value=""@ValueMax"" Label=""ValueMax""></MatTextField>
@@ -330,4 +330,4 @@
 
     ")></BlazorFiddle>
     </SourceContent>
-</DemoContainer>
\ No newline at end of file
+</DemoContainer>

From 11031433285eb8834ed107552a729fd06a7ac3ca Mon Sep 17 00:00:00 2001
From: Keith <keith@keithfimreite.com>
Date: Wed, 7 Oct 2020 12:22:14 -0700
Subject: [PATCH 6/6] Update DemoMatSlider.razor

minor formatting
---
 src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
index 1407a119..f10d6233 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor
@@ -148,7 +148,7 @@
         <MatSlider @bind-Value="@Val4" Step="5" EnableStep="true" ValueMin="0" ValueMax="100" Markers="true" Pin="true" TValue="int" Discrete="true"></MatSlider>
 
         @code
-            {
+        {
 
             public int Val4
             {
@@ -169,7 +169,7 @@
         <MatSlider @bind-Value=""@Val4"" Step=""5"" EnableStep=""true"" ValueMin=""0"" ValueMax=""100"" Markers=""true"" Pin=""true"" TValue=""int"" Discrete=""true""></MatSlider>
 
         @code
-            {
+        {
 
             public int Val4
             {
