From 1a333aad0a8bd2b97e3ff71be2a8104bdbb02726 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 10 Jul 2024 15:04:52 +0900
Subject: [PATCH] slider

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../Pages/FormInputs/FormInputSlider.razor    | 76 +++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 BlazorFluentUI/Components/Pages/FormInputs/FormInputSlider.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index e843a2e..5208074 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -34,6 +34,7 @@
                 <FluentNavLink Href="forminputradio" Icon="@(new Icons.Regular.Size20.RadioButton())" IconColor="Color.Accent">Radio</FluentNavLink>
                 <FluentNavLink Href="forminputrating" Icon="@(new Icons.Regular.Size20.Star())" IconColor="Color.Accent">Rating</FluentNavLink>
                 <FluentNavLink Href="forminputsearch" Icon="@(new Icons.Regular.Size20.ScreenSearch())" IconColor="Color.Accent">Search</FluentNavLink>
+                <FluentNavLink Href="forminputslider" Icon="@(new Icons.Regular.Size20.Options())" IconColor="Color.Accent">Slider</FluentNavLink>
             </FluentNavGroup>
 
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputSlider.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputSlider.razor
new file mode 100644
index 0000000..ad86bd7
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputSlider.razor
@@ -0,0 +1,76 @@
+@page "/forminputslider"
+
+@rendermode RenderMode.InteractiveAuto
+
+<FluentLabel Typo="Typography.H3">Slider</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentSlider</code> wraps a web component of a <code>range slider</code> element.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentButton OnClick="@(() => defOrientation = (defOrientation == Orientation.Vertical) ? Orientation.Horizontal : Orientation.Vertical)">
+        Toggle Orientation
+    </FluentButton>
+    <FluentSlider Class="mb-4" @bind-Value="defValue" TValue="int"
+                  Label="Select a temperature" Orientation="@defOrientation"
+                  Min="0" Max="100" Step="10">
+        <FluentSliderLabel Position="0">0℃</FluentSliderLabel>
+        <FluentSliderLabel Position="10">10℃</FluentSliderLabel>
+        <FluentSliderLabel Position="90">90℃</FluentSliderLabel>
+        <FluentSliderLabel Position="100">100℃</FluentSliderLabel>
+    </FluentSlider>
+    <p>Selected value: @defValue</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4"><code>double</code> Type Value</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentSlider Class="mb-4" @bind-Value="dValue" TValue="double"
+                  Label="Select a temperature"
+                  Min="-5" Max="5" Step="0.5">
+        <FluentSliderLabel Position="-5">-5℃</FluentSliderLabel>
+        <FluentSliderLabel Position="0">0℃</FluentSliderLabel>
+        <FluentSliderLabel Position="2.5">2.5℃</FluentSliderLabel>
+        <FluentSliderLabel Position="5">5℃</FluentSliderLabel>
+    </FluentSlider>
+    <p>Selected value: @dValue</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Thumbs</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4>Custom Thumb</h4>
+    <FluentSlider Class="mb-4" @bind-Value="tValue1" TValue="int"
+                  Min="0" Max="100" Step="10">
+        @for (int i = 0; i <= 100; i += 10)
+        {
+            var position = i;
+            <FluentSliderLabel Position="@position">@($"{position}℃")</FluentSliderLabel>
+        }
+        <FluentIcon Value="@(new Icons.Regular.Size28.AnimalTurtle())" Color="@Color.Accent" Slot="thumb" />
+    </FluentSlider>
+    <p>Selected value: @tValue1</p>
+
+    <h4>Custom Thumb and SliderLabel</h4>
+    <FluentSlider Class="mb-4" @bind-Value="tValue2" TValue="int"
+                  Min="0" Max="100" Step="10">
+        <FluentSliderLabel Position="0" HideMark="true">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Globe())" Color="@Color.Accent" />
+        </FluentSliderLabel>
+        <FluentSliderLabel Position="100" HideMark="true">
+            <FluentIcon Value="@(new Icons.Regular.Size24.Star())" Color="@Color.Accent" />
+        </FluentSliderLabel>
+        <FluentIcon Value="@(new Icons.Regular.Size28.AnimalRabbit())" Color="@Color.Accent" Slot="thumb" />
+    </FluentSlider>
+    <p>Selected value: @tValue2</p>
+</FluentCard>
+
+@code {
+    Orientation defOrientation = Orientation.Horizontal;
+    int defValue = 70;
+
+    double dValue = 3.5;
+
+    int tValue1 = 0;
+    int tValue2 = 0;
+}