Range Slider (#255)

* MudRangeSlider

* MudRangeSlider Update

* Fix Margin / absolute Position Issue, for size and layout. Default Value and Upper Value to Min / Max if they were not defined by the parameter.

* Docs Enhancement

* Add Gap, Display, Fix click

* rename GAP, update SCSS

* SCSS Rebuild

* Update README.md for RangeSlider

* Firefox CSS Fix

---------

Co-authored-by: mckaragoz <[email protected]>

Author: enkodellc

CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj

@@ -39,7 +39,7 @@
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.1.*" />
 	</ItemGroup>
 
-	<!--Uncomment it on development and debug to generate min.css on rebuild-->
+	<!--Uncomment it on development and debug to compile scss and generate min.css on rebuild-->
 	<!--This sections causes to fail auto deployment to CloudFlare-->
 	<!--<Target Name="ToolRestore" BeforeTargets="PreBuildEvent">
 		<Exec Command="dotnet tool restore" StandardOutputImportance="high" />

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

@@ -0,0 +1,90 @@
+@namespace MudExtensions
+@inherits MudComponentBase
+@using System.Globalization
+@typeparam T
+@{
+    var width = CalculateWidth().ToString(CultureInfo.InvariantCulture);
+    var left = CalculateLeft().ToString(CultureInfo.InvariantCulture);
+    var upperLeft = (CalculateWidth() + CalculateLeft()).ToString(CultureInfo.InvariantCulture);
+}
+<div class="@Classname" style="@Style">
+    @if (ChildContent != null)
+    {
+        <MudText Typo="Typo.body1">@ChildContent</MudText>
+    }
+
+    <div class="@(Range ? "mud-slider-container mud-range-container" : "mud-slider-container")">
+
+        @if (Variant == Variant.Filled)
+        {
+            <div class="mud-slider-inner-container">
+                <div class="mud-slider-filled" style="@(Range ? $"width:{width}%; margin-left:{left}%;" : $"width:{width}%;")"></div>
+            </div>
+        }
+
+        @if (TickMarks)
+        {
+            <div class="mud-slider-inner-container">
+                @SliderTickMarks()
+            </div>
+        }
+
+        @if (Range)
+        {
+            <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)"
+            @bind-value="@UpperText" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
+
+            @SliderValueLabel(upperLeft, UpperValue?.ToString())
+        }
+
+        <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)"
+        @bind-value="@Text" @bind-value:event="@((Immediate ? "oninput" : "onchange"))" />
+
+        @SliderValueLabel(left, Value?.ToString())
+
+
+    </div>
+
+    @if (Display)
+    {
+        <MudText Typo="Typo.body1" Class="mud-range-display">@DisplayText</MudText>
+    }
+</div>
+
+@if (_userInvalidatedRange)
+{
+    _userInvalidatedRange = false;
+    StateHasChanged();
+}
+
+@code
+{
+    private RenderFragment SliderValueLabel(string left, string value)
+    {
+        @if (ValueLabel)
+        {
+            return @<div class="mud-slider-value-label" style="@($"left:{left}%;")">
+        @value
+    </div>;
+        }
+        return null;
+    }
+
+    private RenderFragment SliderTickMarks()
+    {
+        return @<div class="mud-slider-tickmarks">
+        @for (int i = 0; i < _tickMarkCount; i++)
+        {
+            int current = i;
+
+            <div class="d-flex flex-column relative">
+                <span class="mud-slider-track-tick" />
+                @if (TickMarkLabels != null && current < TickMarkLabels.Length)
+                {
+                    <MudText Class="mud-slider-track-tick-label" Typo="Typo.body2">@TickMarkLabels[current]</MudText>
+                }
+            </div>
+        }
+    </div>;
+    }
+}