Vertical slider added (#1781)

* Slider Orientation property added Vertical range slider keyboard navigation fixed * Update slider styles * Vertical slider rendering fixed * Add Updated badge to Slider --------- Co-authored-by: yordanov <vasil@yordanov.info>
radzenhq · Nov 11, 2024 · efffdf5 · efffdf5
1 parent c3cb0c8
commit efffdf5
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 44 deletions.
diff --git a/Radzen.Blazor/RadzenSlider.razor b/Radzen.Blazor/RadzenSlider.razor
@@ -11,14 +11,14 @@
     <div @ref="Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
         @if (Range)
         {
-            <span class="rz-slider-range" style="inset-inline-start: @(Left.ToInvariantString())%; width: @((SecondLeft - Left).ToInvariantString())%;"></span>
-            <span tabindex="@(Disabled ? -1 : 0)" @ref="minHandle" class="rz-slider-handle" style="inset-inline-start: @(Left.ToInvariantString())%; bottom: auto;" @onkeydown="@(args => OnKeyPress(args, true))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
-            <span tabindex="@(Disabled ? -1 : 0)" @ref="maxHandle" class="rz-slider-handle rz-slider-handle-active" style="inset-inline-start: @(SecondLeft.ToInvariantString())%; bottom: auto;" @onkeydown="@(args => OnKeyPress(args, false))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
+            <span class="rz-slider-range" style="@(Orientation == Orientation.Horizontal ? "inset-inline-start" : "top"): @((Orientation == Orientation.Horizontal ? Left : 100 - SecondLeft).ToInvariantString())%; @(Orientation == Orientation.Horizontal ? "width" : "height"): @((SecondLeft - Left).ToInvariantString())%;"></span>
+            <span tabindex="@(Disabled ? -1 : 0)" @ref="minHandle" class="rz-slider-handle @($"rz-slider-handle-{Orientation.ToString().ToLowerInvariant()}")" style="@(Orientation == Orientation.Horizontal ? "inset-inline-start" : "top"): @((Orientation == Orientation.Horizontal ? Left : 100 - Left).ToInvariantString())%; bottom: auto;" @onkeydown="@(args => OnKeyPress(args, true))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
+            <span tabindex="@(Disabled ? -1 : 0)" @ref="maxHandle" class="rz-slider-handle @($"rz-slider-handle-{Orientation.ToString().ToLowerInvariant()}") rz-slider-handle-active" style="@(Orientation == Orientation.Horizontal ? "inset-inline-start" : "top"): @((Orientation == Orientation.Horizontal ? SecondLeft : 100 - SecondLeft).ToInvariantString())%; bottom: auto;" @onkeydown="@(args => OnKeyPress(args, false))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
         }
         else
         {
-            <span class="rz-slider-range rz-slider-range-min" style="width: @(Left.ToInvariantString())%;"></span>
-            <span tabindex="@(Disabled ? -1 : 0)" @ref="handle" class="rz-slider-handle" style="inset-inline-start: @(Left.ToInvariantString())%;" @onkeydown="@(args => OnKeyPress(args, false))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
+            <span class="rz-slider-range rz-slider-range-min" style="@(Orientation == Orientation.Horizontal ? "width" : "height"): @(Left.ToInvariantString())%;@(Orientation == Orientation.Horizontal ? "" : $"top:{(100 - Left).ToInvariantString()}%")"></span>
+            <span tabindex="@(Disabled ? -1 : 0)" @ref="handle" class="rz-slider-handle @($"rz-slider-handle-{Orientation.ToString().ToLowerInvariant()}")" style="@(Orientation == Orientation.Horizontal ? "inset-inline-start" : "top"): @((Orientation == Orientation.Horizontal ? Left : 100 - Left).ToInvariantString())%;" @onkeydown="@(args => OnKeyPress(args, false))" @onkeydown:preventDefault=preventKeyPress @onkeydown:stopPropagation></span>
         }
     </div>
 }
diff --git a/Radzen.Blazor/RadzenSlider.razor.cs b/Radzen.Blazor/RadzenSlider.razor.cs
@@ -91,7 +91,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
                 if (Visible && !Disabled)
                 {
-                    await JSRuntime.InvokeVoidAsync("Radzen.createSlider", UniqueID, Reference, Element, Range, Range ? minHandle : handle, maxHandle, Min, Max, Value, Step);
+                    await JSRuntime.InvokeVoidAsync("Radzen.createSlider", UniqueID, Reference, Element, Range, Range ? minHandle : handle, maxHandle, Min, Max, Value, Step, Orientation == Orientation.Vertical);
 
                     StateHasChanged();
                 }
@@ -194,9 +194,15 @@ public async System.Threading.Tasks.Task OnValueChange(decimal value, bool isMin
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
-            return $"rz-slider {(Disabled ? "rz-state-disabled " : "")}rz-slider-horizontal";
+            return $"rz-slider {(Disabled ? "rz-state-disabled " : "")}{(Orientation == Orientation.Vertical ? "rz-slider-vertical" : "rz-slider-horizontal")}";
         }
 
+        /// <summary>
+        /// Specifies the orientation. Set to <c>Orientation.Horizontal</c> by default.
+        /// </summary>
+        [Parameter]
+        public Orientation Orientation { get; set; } = Orientation.Horizontal;
+
         /// <summary>
         /// Gets or sets the value.
         /// </summary>
@@ -316,7 +322,7 @@ async Task OnKeyPress(KeyboardEventArgs args, bool isMin)
         {
             var key = args.Code != null ? args.Code : args.Key;
 
-            if (key == "ArrowLeft" || key == "ArrowRight")
+            if (Orientation == Orientation.Horizontal ? key == "ArrowLeft" || key == "ArrowRight" : key == "ArrowUp" || key == "ArrowDown")
             {
                 preventKeyPress = true;
 
@@ -329,13 +335,13 @@ async Task OnKeyPress(KeyboardEventArgs args, bool isMin)
                     var oldMinValueAsDecimal = (decimal)ConvertType.ChangeType(oldMinValue, typeof(decimal));
                     var oldMaxValueAsDecimal = (decimal)ConvertType.ChangeType(oldMaxValue, typeof(decimal));
 
-                    await OnValueChange((isMin ? oldMinValueAsDecimal : oldMaxValueAsDecimal) + (key == "ArrowLeft" ? -step : step), isMin);
+                    await OnValueChange((isMin ? oldMinValueAsDecimal : oldMaxValueAsDecimal) + (key == "ArrowLeft" || key == "ArrowDown" ? -step : step), isMin);
                 }
                 else
                 {
                     var valueAsDecimal = Value == null ? 0 : (decimal)ConvertType.ChangeType(Value, typeof(decimal));
 
-                    await OnValueChange(valueAsDecimal + (key == "ArrowLeft" ? -step : step), isMin);
+                    await OnValueChange(valueAsDecimal + (key == "ArrowLeft" || key == "ArrowDown" ? -step : step), isMin);
                 }
             }
             else

diff --git a/Radzen.Blazor/themes/components/blazor/_slider.scss b/Radzen.Blazor/themes/components/blazor/_slider.scss
@@ -49,37 +49,63 @@ $slider-disabled-handle-border: none !default;
   }
 }
 
-.rz-slider-horizontal {
-  height: var(--rz-slider-horizontal-height);
-  width: var(--rz-slider-horizontal-width);
-}
-
 .rz-slider-range {
   position: absolute;
-  inset-block-start: -1px;
-  inset-block-end: -1px;
-  inset-inline-start: -1px;
-
-  border-start-start-radius: var(--rz-slider-border-radius);
-  border-end-start-radius: var(--rz-slider-border-radius);
   background-color: var(--rz-slider-range-background-color);
   border: var(--rz-slider-range-border);
 }
 
 .rz-slider-handle {
   position: absolute;
-  transform: translateY(-50%);
-  top: 50%;
-  margin-inline-start: calc(var(--rz-slider-handle-width) / -2);
   background-color: var(--rz-slider-handle-background-color);
   border: var(--rz-slider-handle-border);
   border-radius: var(--rz-slider-handle-border-radius);
   box-shadow: var(--rz-slider-handle-shadow);
-  width: var(--rz-slider-handle-width);
-  height: var(--rz-slider-handle-height);
   transition: var(--rz-slider-handle-transition);
 }
 
+.rz-slider-horizontal {
+  height: var(--rz-slider-horizontal-height);
+  width: var(--rz-slider-horizontal-width);
+
+  .rz-slider-range {
+    inset-block-start: -1px;
+    inset-block-end: -1px;
+    inset-inline-start: -1px;
+    border-start-start-radius: var(--rz-slider-border-radius);
+    border-end-start-radius: var(--rz-slider-border-radius);
+  }
+
+  .rz-slider-handle {
+    top: 50%;
+    transform: translateY(-50%);
+    margin-inline-start: calc(var(--rz-slider-handle-width) / -2);
+    width: var(--rz-slider-handle-width);
+    height: var(--rz-slider-handle-height);
+  }
+}
+
+.rz-slider-vertical {
+  width: var(--rz-slider-horizontal-height);
+  height: var(--rz-slider-horizontal-width);
+
+  .rz-slider-range {
+    inset-inline-start: -1px;
+    inset-inline-end: -1px;
+    inset-block-end: -1px;
+    border-end-start-radius: var(--rz-slider-border-radius);
+    border-end-end-radius: var(--rz-slider-border-radius);
+  }
+
+    .rz-slider-handle {
+      left: 50%;
+      transform: translateX(-50%);
+      margin-block-start: calc(var(--rz-slider-handle-width) / -2);
+      width: var(--rz-slider-handle-height);
+      height: var(--rz-slider-handle-width);
+  }
+}
+
 .rz-slider:not(.rz-state-disabled) {
   .rz-slider-handle {
     &:hover,

diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js
@@ -459,27 +459,31 @@ window.Radzen = {
     min,
     max,
     value,
-    step
+    step,
+    isVertical
   ) {
     Radzen[id] = {};
     Radzen[id].mouseMoveHandler = function (e) {
-      if (!slider.canChange) return;
       e.preventDefault();
+
       var handle = slider.isMin ? minHandle : maxHandle;
+
+      if (!slider.canChange) return;
+
       var offsetX =
         e.targetTouches && e.targetTouches[0]
           ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
-          : e.pageX - handle.getBoundingClientRect().left;
-      var percent = (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX
-            : handle.offsetLeft + offsetX) / parent.offsetWidth;
-
-      if (percent > 1) {
-          percent = 1;
-      } else if (percent < 0) {
-          percent = 0;
-      }
+                : e.pageX - handle.getBoundingClientRect().left;
 
-      var newValue = percent * (max - min) + min;
+      var offsetY =
+        e.targetTouches && e.targetTouches[0]
+          ? e.targetTouches[0].pageY - e.target.getBoundingClientRect().top
+              : e.pageY - handle.getBoundingClientRect().top;
+
+      var percent = isVertical ? (parent.offsetHeight - handle.offsetTop - offsetY) / parent.offsetHeight
+        : (Radzen.isRTL(handle) ? parent.offsetWidth - handle.offsetLeft - offsetX : handle.offsetLeft + offsetX) / parent.offsetWidth;
+
+      var newValue = Math.max(min, Math.min(percent, max)) * (max - min) + min;
 
       if (
         slider.canChange &&
@@ -500,11 +504,14 @@ window.Radzen = {
         slider.canChange = true;
         slider.isMin = minHandle == e.target;
       } else {
+
         var offsetX =
           e.targetTouches && e.targetTouches[0]
             ? e.targetTouches[0].pageX - e.target.getBoundingClientRect().left
-            : e.offsetX;
+                  : e.offsetX;
+
         var percent = offsetX / parent.offsetWidth;
+
         var newValue = percent * (max - min) + min;
         var oldValue = range ? value[slider.isMin ? 0 : 1] : value;
         if (newValue >= min && newValue <= max && newValue != oldValue) {

diff --git a/RadzenBlazorDemos/Pages/Index.razor b/RadzenBlazorDemos/Pages/Index.razor
@@ -255,7 +255,7 @@
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/rating"><RadzenIcon aria-hidden="true" Icon="&#xe839" /><span>Rating</span></RadzenLink></RadzenColumn>
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/security-code"><RadzenIcon aria-hidden="true" Icon="&#xf045" /><span>SecurityCode</span><RadzenBadge BadgeStyle="BadgeStyle.Success" Title="New"><RadzenIcon aria-hidden="true" Icon="&#xe061" /><span>New</span></RadzenBadge></RadzenLink></RadzenColumn>
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/selectbar"><RadzenIcon aria-hidden="true" Icon="&#xf8e8" /><span>SelectBar</span></RadzenLink></RadzenColumn>
-                  <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/slider"><RadzenIcon aria-hidden="true" Icon="&#xe429" /><span>Slider</span></RadzenLink></RadzenColumn>
+                  <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/slider"><RadzenIcon aria-hidden="true" Icon="&#xe429" /><span>Slider</span><RadzenBadge BadgeStyle="BadgeStyle.Info" Title="Updated"><RadzenIcon aria-hidden="true" Icon="&#xe863" /><span>Updated</span></RadzenBadge></RadzenLink></RadzenColumn>
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/speechtotextbutton"><RadzenIcon aria-hidden="true" Icon="&#xe029" /><span>SpeechToTextButton</span></RadzenLink></RadzenColumn>
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/splitbutton"><RadzenIcon aria-hidden="true" Icon="&#xf756" /><span>SplitButton</span></RadzenLink></RadzenColumn>
                   <RadzenColumn Size="12" SizeXS="6" SizeSM="4" SizeLG="3"><RadzenLink Path="/switch"><RadzenIcon aria-hidden="true" Icon="&#xe9f6" /><span>Switch</span></RadzenLink></RadzenColumn>

diff --git a/RadzenBlazorDemos/Pages/SliderPage.razor b/RadzenBlazorDemos/Pages/SliderPage.razor
@@ -56,6 +56,13 @@
     <SliderDisabled />
 </RadzenExample>
 
+<RadzenText Anchor="slider#vertical-slider" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
+    Vertical Slider
+</RadzenText>
+<RadzenExample ComponentName="Slider" Example="SliderVertical">
+    <SliderVertical />
+</RadzenExample>
+
 <RadzenText Anchor="slider#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation
 </RadzenText>

diff --git a/RadzenBlazorDemos/Pages/SliderVertical.razor b/RadzenBlazorDemos/Pages/SliderVertical.razor
@@ -0,0 +1,9 @@
+<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceAround">
+    <RadzenSlider @bind-Value=@value TValue="int" Orientation="Orientation.Vertical" />
+    <RadzenSlider Range="true" @bind-Value=@values TValue="IEnumerable<int>" Orientation="Orientation.Vertical" />
+</RadzenStack>
+
+@code {
+    int value = 33;
+    IEnumerable<int> values = new int[] { 14, 78 };
+}
diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs
@@ -1416,6 +1416,7 @@ public class ExampleService
                 {
                     Name = "Slider",
                     Path = "slider",
+                    Updated = true,
                     Description = "Demonstration and configuration of the Radzen Blazor Slider component.",
                     Icon = "&#xe429",
                     Tags = new [] { "form", "slider" }

diff --git a/RadzenBlazorDemos/wwwroot/css/fluent-base.css b/RadzenBlazorDemos/wwwroot/css/fluent-base.css
diff --git a/RadzenBlazorDemos/wwwroot/css/fluent-dark-base.css b/RadzenBlazorDemos/wwwroot/css/fluent-dark-base.css
diff --git a/RadzenBlazorDemos/wwwroot/css/material3-base.css b/RadzenBlazorDemos/wwwroot/css/material3-base.css
diff --git a/RadzenBlazorDemos/wwwroot/css/material3-dark-base.css b/RadzenBlazorDemos/wwwroot/css/material3-dark-base.css