naive-ui/styles/themes/light/components/Slider.scss

@mixin setup-light-slider {
  $--slider-rail-background-color: (
    'default': $--n-rail-color,
    'hover': change-color($--n-rail-color, $alpha: alpha($--n-rail-color) * 0.75)
  ) !global;
  $--slider-rail-fill-background-color: (
    'default': $--n-primary-color,
    'hover': $--n-primary-hover-color
  ) !global;
  $--slider-handle-background-color: $--n-base-background-color !global;
  $--slider-handle-box-shadow: (
    'default': inset 0 0 0 2px $--n-primary-color,
    'hover': inset 0 0 0 2px $--n-primary-hover-color,
    'active': (inset 0 0 0 2px $--n-primary-hover-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)),
    'focus': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2))
  ) !global;
  $--slider-indicator-background-color:  rgba(0, 0, 0, .85) !global;
  $--slider-indicator-box-shadow: $--n-popover-box-shadow !global;
  $--slider-indicator-text-color: $--n-base-background-color !global;
  $--slider-dot-box-shadow: (
    'default': inset 0 0 0 2px $--n-primary-color,
    'active': inset 0 0 0 2px $--n-primary-hover-color
  ) !global;
}