RangeSlider Customizable Value Labels (#360)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/RangeSlider/MudRangeSlider.razor

@@ -34,13 +34,13 @@
             <input class="mud-slider-input" aria-valuenow="@UpperValue" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="UserAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@(Disabled || _userInvalidatedRange || (Range && DisableMax))"
             @bind-value="@UpperText" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
 
-            @SliderValueLabel(upperLeft, UpperValue?.ToString())
+            @SliderValueLabel(upperLeft, string.IsNullOrEmpty(UpperLabelText) ? UpperValue?.ToString() : UpperLabelText)
         }
 
         <input class="mud-slider-input" aria-valuenow="@Value" aria-valuemin="@_min" aria-valuemax="@_max" role="slider" @attributes="UserAttributes" type="range" min="@_min" max="@_max" step="@_step" disabled="@(Disabled || _userInvalidatedRange || (Range && DisableMin))"
         @bind-value="@Text" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
 
-        @SliderValueLabel(left, Value?.ToString())
+        @SliderValueLabel(left, string.IsNullOrEmpty(LabelText) ? Value?.ToString() : LabelText)
 
 
     </div>

CodeBeam.MudBlazor.Extensions/Components/RangeSlider/MudRangeSlider.razor.cs

@@ -44,6 +44,20 @@ public bool Range
             set => _range = value;
         }
 
+        /// <summary>
+        /// Custom text for ValueLabel
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.Slider.Validation)]
+        public string? LabelText { get; set; }
+
+        /// <summary>
+        /// Custom text for upper ValueLabel
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.Slider.Validation)]
+        public string? UpperLabelText { get; set; }
+
         /// <summary>
         /// The minimum allowed value of the slider. Should not be equal to max.
         /// </summary>

ComponentViewer.Docs/Pages/Examples/RangeSliderExample1.razor

@@ -5,20 +5,22 @@
 <MudGrid>
     <MudItem xs="12" sm="8">
         <MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="_valueLabel" Range="_range" TickMarks="_tickmarks"
-                        Min="_min" Max="_max" Step="_step" Display="_display" MinDistance="_minDistance" DisableMin="_disableMin" DisableMax="_disableMax">@_label</MudRangeSlider>
+                        Min="_min" Max="_max" Step="_step" Display="_display" MinDistance="_minDistance" DisableMin="_disableMin" DisableMax="_disableMax" LabelText="@_labelText" UpperLabelText="@($"{_upperLabelText} {_upperValue}")">@_label</MudRangeSlider>
    </MudItem>
 
     <MudItem xs="12" sm="4">
         <MudStack>
             <MudTextField @bind-Value="_label" Label="Label" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            <MudTextField @bind-Value="_labelText" Label="Label Text" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            <MudTextField @bind-Value="_upperLabelText" Label="Upper Label Text" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudNumericField @bind-Value="_value" Label="Lower Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudNumericField @bind-Value="_upperValue" Label="Upper Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
-            <MudSwitchM3 @bind-Checked="_valueLabel" Label="ValueLabel" Color="Color.Secondary" />
-            <MudSwitchM3 @bind-Checked="_range" Label="Range" Color="Color.Secondary" />
-            <MudSwitchM3 @bind-Checked="_tickmarks" Label="Tickmarks" Color="Color.Secondary" />
-            <MudSwitchM3 @bind-Checked="_disableMin" Label="DisableMin" Color="Color.Secondary" />
-            <MudSwitchM3 @bind-Checked="_disableMax" Label="DisableMax" Color="Color.Secondary" />
-            <MudSwitchM3 @bind-Checked="_display" Label="Display" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_valueLabel" Label="ValueLabel" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_range" Label="Range" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_tickmarks" Label="Tickmarks" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_disableMin" Label="DisableMin" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_disableMax" Label="DisableMax" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_display" Label="Display" Color="Color.Secondary" />
             <MudNumericField @bind-Value="_min" Label="Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudNumericField @bind-Value="_max" Label="Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudNumericField @bind-Value="_step" Label="Step" Variant="Variant.Outlined" Margin="Margin.Dense" />
@@ -42,6 +44,8 @@
     int _max = 100;
     int _step = 1;
     int _minDistance = 2;
+    string _labelText;
+    string _upperLabelText;
 
     void ClearValues()
     {