🆕 feat(Slider): fix the issue of losing focus state and add support for customizing the size of track

src/Masa.Blazor/Components/Input/MInput.razor.cs

@@ -11,7 +11,7 @@ public partial class MInput<TValue> : MasaComponentBase, IThemeable, IFilterInpu
 
  [CascadingParameter(Name = "AppIsDark")] protected bool AppIsDark { get; set; }
 
- [Parameter] public string? Color { get; set; }
+ [Parameter] public virtual string? Color { get; set; }
 
  [Parameter] public string? BackgroundColor { get; set; }
 
@@ -224,7 +224,7 @@ public void StateHasChangedForJsInvokable()
 
  #endregion
 
- public virtual string ComputedColor => IsDisabled ? "" : Color ?? (IsDark && !AppIsDark ? "white" : "primary");
+ public virtual string? ComputedColor => IsDisabled ? null : Color ?? (IsDark && !AppIsDark ? "white" : "black");
 
  public virtual bool HasColor => false;
 

src/Masa.Blazor/Components/Slider/MSliderBase.razor

@@ -57,7 +57,9 @@
 
  private RenderFragment GenTrackContainer() => __builder =>
  {
- <div class="@Block.Element("track-container")" @ref="TrackElement">
+ <div class="@Block.Element("track-container")"
+ style="--m-slider-track-size: @($"{TrackSize}px")"
+ @ref="TrackElement">
  @GenTrackContainerChild()
  </div>
  };
@@ -108,10 +110,10 @@
  protected RenderFragment GenThumbContainerCore(int index, ElementReferenceWrapper elRefWrapper) => __builder =>
  {
  var active = IsThumbActive(index);
- var focus = IsThumbFocus(index);
+ var focused = IsThumbFocus(index);
  var showLabel = ShowThumbLabel;
 
- <div class="@_thumbContainerModifierBuilder.Add(active, focus, showLabel).AddTextColor(ComputedThumbColor)"
+ <div class="@_thumbContainerModifierBuilder.Add(active, focused, showLabel).AddTextColor(ComputedThumbColor)"
  style="@GetThumbContainerStyles(index)"
  @ref="@elRefWrapper.Value"
  @attributes="@ThumbAttrs"
@@ -131,8 +133,8 @@
 
  private RenderFragment GenThumb() => __builder =>
  {
- <div class="@GetClass(Block.Element("thumb").Name, CssClassUtils.GetBackgroundColor(ComputedThumbColor))"
- style="@(StyleBuilder.Create().AddBackgroundColor(ComputedThumbColor))">
+ <div class="@GetClass(Block.Element("thumb").Name, CssClassUtils.GetTextColor(ComputedThumbColor))"
+ style="@CssStyleUtils.GetTextColor(ComputedThumbColor)">
  </div>
  };
 

src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs

@@ -28,10 +28,14 @@ public partial class MSliderBase<TValue, TNumeric> : MInput<TValue>, IOutsideCli
 
  [Parameter] [MasaApiParameter(false)] public StringBoolean Ticks { get; set; } = false;
 
+ [Parameter] [MasaApiParameter("primary")] public override string? Color { get; set; } = "primary";
+
  [Parameter] public string? TrackColor { get; set; }
 
  [Parameter] public string? TrackFillColor { get; set; }
 
+ [Parameter] [MasaApiParameter(2, ReleasedOn = "v1.7.0")] public double TrackSize { get; set; } = 2;
+
  [Parameter] [MasaApiParameter(2)] public double TickSize { get; set; } = 2;
 
  [Parameter] public StringBoolean? ThumbLabel { get; set; }
@@ -157,12 +161,7 @@ public string? ComputedTrackColor
  return TrackColor;
  }
 
- if (IsDark)
- {
- return ValidationState;
- }
-
- return string.IsNullOrEmpty(ValidationState) ? "primary lighten-3" : ValidationState;
+ return ValidationState ?? ComputedColor;
  }
  }
 
@@ -180,7 +179,7 @@ public string? ComputedTrackFillColor
  return TrackFillColor;
  }
 
- return string.IsNullOrEmpty(ValidationState) ? ComputedColor : ValidationState;
+ return ValidationState ?? ComputedColor;
  }
  }
 

src/Masa.Blazor/wwwroot/css/masa-blazor.css

@@ -23186,14 +23186,12 @@ html.overflow-y-hidden {
  margin-bottom: 24px;
 }
 .theme--light.m-slider .m-slider__track-background,
-.theme--light.m-slider .m-slider__track-fill,
-.theme--light.m-slider .m-slider__thumb {
+.theme--light.m-slider .m-slider__track-fill {
  background: rgba(0, 0, 0, 0.26);
 }
 
 .theme--dark.m-slider .m-slider__track-background,
-.theme--dark.m-slider .m-slider__track-fill,
-.theme--dark.m-slider .m-slider__thumb {
+.theme--dark.m-slider .m-slider__track-fill {
  background: rgba(255, 255, 255, 0.2);
 }
 
@@ -23248,6 +23246,7 @@ html.overflow-y-hidden {
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
+ background-color: currentColor;
 }
 .m-slider__thumb:before {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
@@ -23256,7 +23255,7 @@ html.overflow-y-hidden {
  width: 36px;
  height: 36px;
  border-radius: 50%;
- /*background: currentColor;*/
+ background: currentColor;
  opacity: 0.3;
  position: absolute;
  left: -12px;
@@ -23343,13 +23342,16 @@ html.overflow-y-hidden {
 }
 .m-slider--horizontal .m-slider__track-container {
  width: 100%;
- height: 2px;
+ height: var(--m-slider-track-size);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
 }
-.m-slider--horizontal .m-slider__track-background, .m-slider--horizontal .m-slider__track-fill {
- height: 100%;
+.m-slider--horizontal .m-slider__track-background {
+ height: inherit;
+}
+.m-slider--horizontal .m-slider__track-fill {
+ height: calc(var(--m-slider-track-size) + 1px);
 }
 .m-slider--horizontal .m-slider__ticks-container {
  left: 0;
@@ -23391,13 +23393,17 @@ html.overflow-y-hidden {
 }
 .m-slider--vertical .m-slider__track-container {
  height: 100%;
- width: 2px;
+ width: var(--m-slider-track-size);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
 }
-.m-slider--vertical .m-slider__track-background, .m-slider--vertical .m-slider__track-fill {
- width: 100%;
+.m-slider--vertical .m-slider__track-background {
+ width: inherit;
+}
+.m-slider--vertical .m-slider__track-fill {
+ width: calc(var(--m-slider-track-size) + 1px);
+ transform: translateX(-0.5px);
 }
 .m-slider--vertical .m-slider__thumb-container {
  left: 50%;

src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css

@@ -1686,4 +1686,14 @@ html.m-overlay-scroll-blocked {
 
 .m-input--switch--text.m-input--is-dirty .m-input--switch__right {
  color: #fff
-}
+}
+
+/* slider */
+
+.m-slider__track-background {
+ opacity: 0.38;
+}
+
+.m-slider__track-background, .m-slider__track-fill {
+ border-radius: 6px;
+}