Slider样式修改拖动块的大小

已于 2024-06-28 08:07:37 修改
阅读量196 收藏
点赞数 3
文章标签： wpf c#
于 2024-06-28 08:00:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a764112/article/details/140031997
版权

触摸屏手指拖动silder控件时没法修改大小,找了第三方库也没有对应的属性,自己定义一个样式,用作记录防止忘记

样式效果

1.先继承Slider

 public class HsSlider : Slider
 {
     public static readonly DependencyProperty HsThumbWidthProperty;
     public static readonly DependencyProperty HsThumbHeightProperty;
     public static readonly DependencyProperty HsHorizontalRepeatWidthProperty;
     public static readonly DependencyProperty HsHorizontalRepeatHeightProperty;
     public static readonly DependencyProperty HsForegroundProperty;
     public static readonly DependencyProperty HsBackgrondProperty;
     public static readonly DependencyProperty HsValueProperty;
     private static bool _flag = true;

     static HsSlider()
     {
         BrushConverter brushConverter = new BrushConverter();
         HsThumbWidthProperty = DependencyProperty.Register("HsThumbWidth", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0));
         HsThumbHeightProperty = DependencyProperty.Register("HsThumbHeight", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0));
         HsHorizontalRepeatWidthProperty = DependencyProperty.Register("HsHorizontalRepeatWidth", typeof(double), typeof(HsSlider), new PropertyMetadata(10.0));
         HsHorizontalRepeatHeightProperty = DependencyProperty.Register("HsHorizontalRepeatHeight", typeof(double), typeof(HsSlider), new PropertyMetadata(10.0));
         HsForegroundProperty = DependencyProperty.Register("HsForeground", typeof(Brush), typeof(HsSlider), new PropertyMetadata((Brush)brushConverter.ConvertFromString("#1BA3FF")));
         HsBackgrondProperty = DependencyProperty.Register("HsBackgrond", typeof(Brush), typeof(HsSlider), new PropertyMetadata((Brush)brushConverter.ConvertFromString("#eee")));
         HsValueProperty = DependencyProperty.Register("HsValue", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0, new PropertyChangedCallback(ValueChanged)));
     }


     public double HsThumbWidth
     {
         get { return (double)GetValue(HsThumbWidthProperty); }
         set { SetValue(HsThumbWidthProperty, value); }
     }
     public double HsValue
     {
         get { return (double)GetValue(HsValueProperty); }
         set { SetValue(HsValueProperty, value); }
     }

     public double HsThumbHeight
     {
         get { return (double)GetValue(HsThumbHeightProperty); }
         set { SetValue(HsThumbHeightProperty, value); }
     }

     public double HsHorizontalRepeatWidth
     {
         get { return (double)GetValue(HsHorizontalRepeatWidthProperty); }
         set { SetValue(HsHorizontalRepeatWidthProperty, value); }
     }

     public double HsHorizontalRepeatHeight
     {
         get { return (double)GetValue(HsHorizontalRepeatHeightProperty); }
         set { SetValue(HsHorizontalRepeatHeightProperty, value); }
     }

     public Brush HsForeground
     {
         get { return (Brush)GetValue(HsForegroundProperty); }
         set { SetValue(HsForegroundProperty, value); }
     }

     public Brush HsBackgrond
     {
         get { return (Brush)GetValue(HsBackgrondProperty); }
         set { SetValue(HsBackgrondProperty, value); }
     }



     private static void ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
     {
         var slider = d as HsSlider;
         DoubleAnimation doubleAnimation = new DoubleAnimation();
         doubleAnimation.From = slider.Value;
         doubleAnimation.To = double.Parse(e.NewValue.ToString());
         if (_flag)
             doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
         else
             doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0));

         slider.BeginAnimation(HsSlider.ValueProperty, doubleAnimation);
     }


     protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
     {
         base.OnPreviewMouseUp(e);
         _flag = false;
     }

     protected override void OnPreviewMouseUp(MouseButtonEventArgs e)
     {
         base.OnPreviewMouseUp(e);
         _flag = true;
     }
 }

2.样式模板修改

   <!--颜色-->
   <Color x:Key="EffectShadowColor">#88000000</Color>
   <DropShadowEffect x:Key="EffectShadow2" BlurRadius="10" ShadowDepth="2" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" />
   <DropShadowEffect x:Key="EffectShadow1"  BlurRadius="8" ShadowDepth="1" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" />
   <!--水平方向的填充色模板-->
   <ControlTemplate  x:Key="HorizontalRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
       <Rectangle Fill="{TemplateBinding Background}" Height="{Binding HsHorizontalRepeatHeight, RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType=hs:HsSlider}}"/>
   </ControlTemplate>
   <!--垂直方向的填充色模板-->
   <ControlTemplate  x:Key="VerticalRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
       <Rectangle Fill="{TemplateBinding Background}" Width="{Binding HsHorizontalRepeatWidth, RelativeSource={RelativeSource  Mode=FindAncestor, AncestorType=hs:HsSlider}}"/>
   </ControlTemplate>
   <!--左侧填充-->
   <Style x:Key="RepeatButtonTransparentLeft" TargetType="{x:Type RepeatButton}">
       <Setter Property="OverridesDefaultStyle" Value="true"/>
       <Setter Property="Background" Value="#1BA3FF"/>
       <Setter Property="Focusable" Value="false"/>
       <Setter Property="IsTabStop" Value="false"/>
       <Setter Property="Template" Value="{StaticResource HorizontalRepeatButtonTemplate}"/>
   </Style>
   <!--右侧填充-->
   <Style x:Key="RepeatButtonTransparentRight" TargetType="{x:Type RepeatButton}">
       <Setter Property="OverridesDefaultStyle" Value="true"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Focusable" Value="false"/>
       <Setter Property="IsTabStop" Value="false"/>
       <Setter Property="Template" Value="{StaticResource HorizontalRepeatButtonTemplate}"/>
   </Style>

   <!--顶部填充-->
   <Style x:Key="RepeatButtonTransparentTop" TargetType="{x:Type RepeatButton}">
       <Setter Property="OverridesDefaultStyle" Value="true"/>
       <Setter Property="Background" Value="#1BA3FF"/>
       <Setter Property="Focusable" Value="false"/>
       <Setter Property="IsTabStop" Value="false"/>
       <Setter Property="Template" Value="{StaticResource VerticalRepeatButtonTemplate}"/>
   </Style>

   <!--下面填充-->
   <Style x:Key="RepeatButtonTransparentBottom" TargetType="{x:Type RepeatButton}">
       <Setter Property="OverridesDefaultStyle" Value="true"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="Focusable" Value="false"/>
       <Setter Property="IsTabStop" Value="false"/>
       <Setter Property="Template" Value="{StaticResource VerticalRepeatButtonTemplate}"/>
   </Style>

   <!--滑块样式-->
   <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
       <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
           <Ellipse  x:Name="grip" Fill="White" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"   SnapsToDevicePixels="True" Stretch="Fill" StrokeThickness="0" Stroke="#1BA3FF"
                Effect="{StaticResource EffectShadow1}" UseLayoutRounding="True" VerticalAlignment="Center"/>
       </Grid>
       <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
           </Trigger>
           <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
               <BeginStoryboard>
                   <Storyboard>
                       <DoubleAnimation Duration="0:0:.1" To="2" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness"  />
                   </Storyboard>
               </BeginStoryboard>
           </EventTrigger>
           <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
               <BeginStoryboard>
                   <Storyboard>
                       <DoubleAnimation Duration="0:0:.1" To="0" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
                   </Storyboard>
               </BeginStoryboard>
           </EventTrigger>

       </ControlTemplate.Triggers>
   </ControlTemplate>


   <!--垂直方向-->
   <ControlTemplate x:Key="SliderThumbVerticalDefault" TargetType="{x:Type Thumb}">
       <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
           <Ellipse  x:Name="grip" Fill="White" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"   SnapsToDevicePixels="True" Stretch="Fill" StrokeThickness="0" Stroke="#1BA3FF"
                 Effect="{StaticResource EffectShadow1}" UseLayoutRounding="True" VerticalAlignment="Center"/>
       </Grid>
       <ControlTemplate.Triggers>
           <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
           </Trigger>
           <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
               <BeginStoryboard>
                   <Storyboard>
                       <DoubleAnimation Duration="0:0:.1" To="2" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness"  />
                   </Storyboard>
               </BeginStoryboard>
           </EventTrigger>
           <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
               <BeginStoryboard>
                   <Storyboard>
                       <DoubleAnimation Duration="0:0:.1" To="0" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
                   </Storyboard>
               </BeginStoryboard>
           </EventTrigger>
       </ControlTemplate.Triggers>
   </ControlTemplate>

   <!--slider 水平样式-->
   <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
       <Border x:Name="border" VerticalAlignment="Center" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
           <Grid>
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                   <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>
               <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
               <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
               <Border x:Name="TrackBackground" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
                   <Canvas Margin="-6,-1" >
                       <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0"/>
                   </Canvas>
               </Border>
               <Track x:Name="PART_Track" Grid.Row="1">
                   <Track.DecreaseRepeatButton>
                       <!--滑动块左侧-->
                       <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentLeft}"   SnapsToDevicePixels="True"
                                    Background="{Binding Path=HsForeground,  RelativeSource={RelativeSource  Mode=TemplatedParent}}" />
                   </Track.DecreaseRepeatButton>
                   <Track.IncreaseRepeatButton>
                       <!--滑动块右侧-->
                       <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparentRight}"  SnapsToDevicePixels="True" 
                                  Background="{Binding Path=HsBackgrond,  RelativeSource={RelativeSource  Mode=TemplatedParent}}"/>

                   </Track.IncreaseRepeatButton>
                   <Track.Thumb>
                       <Thumb x:Name="Thumb" Focusable="False"   Margin="-1,0,0,0"  SnapsToDevicePixels="True"
                        Height="{Binding Path=HsThumbHeight,  RelativeSource={RelativeSource  Mode=TemplatedParent}}" 
                        Width="{Binding Path=HsThumbWidth,  RelativeSource={RelativeSource  Mode=TemplatedParent}}"
                        OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" />
                   </Track.Thumb>
               </Track>
           </Grid>
       </Border>
       <ControlTemplate.Triggers>
           <Trigger Property="IsSelectionRangeEnabled" Value="true">
               <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
           </Trigger>
           <Trigger Property="IsKeyboardFocused" Value="true">
               <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
           </Trigger>
       </ControlTemplate.Triggers>
   </ControlTemplate>

   <!--silder垂直方向控件模板-->
   <ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
       <Border x:Name="border" HorizontalAlignment="Center"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
           <Grid>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
                   <ColumnDefinition Width="Auto"/>
               </Grid.ColumnDefinitions>
               <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
               <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
               <Border x:Name="TrackBackground" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Grid.Column="1" HorizontalAlignment="center" Margin="0,5" Width="4.0">
                   <Canvas Margin="-1,-6">
                       <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="4.0"/>
                   </Canvas>
               </Border>
               <Track x:Name="PART_Track" Grid.Column="1">
                   <Track.DecreaseRepeatButton>
                       <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentTop}"
                                  Background="{Binding Path=HsForeground, RelativeSource={RelativeSource  Mode=TemplatedParent}}"/>
                   </Track.DecreaseRepeatButton>
                   <Track.IncreaseRepeatButton>

                       <RepeatButton Command="{x:Static Slider.IncreaseLarge}"  Style="{StaticResource RepeatButtonTransparentBottom}"
                                   Background="{Binding Path=HsBackgrond, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
                   </Track.IncreaseRepeatButton>
                   <Track.Thumb>
                       <Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbVerticalDefault}" VerticalAlignment="Top" 
                                Height="{Binding Path=HsThumbHeight, RelativeSource={RelativeSource  Mode=TemplatedParent}}" 
                                Width="{Binding Path=HsThumbWidth, RelativeSource={RelativeSource  Mode=TemplatedParent}}"/>
                   </Track.Thumb>
               </Track>
           </Grid>
       </Border>
       <ControlTemplate.Triggers>
           <Trigger Property="IsSelectionRangeEnabled" Value="true">
               <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
           </Trigger>
           <Trigger Property="IsKeyboardFocused" Value="true">
               <Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
           </Trigger>
       </ControlTemplate.Triggers>
   </ControlTemplate>


   <Style x:Key="CusSliderStyle" TargetType="{x:Type hs:HsSlider}">
       <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
       <Setter Property="Background" Value="Transparent"/>
       <Setter Property="BorderBrush" Value="Transparent"/>

       <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
       <Style.Triggers>
           <Trigger Property="Orientation" Value="Vertical">
               <Setter Property="Template" Value="{StaticResource SliderVertical}"/>
           </Trigger>
       </Style.Triggers>
   </Style>
睡著了，別喊我
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
wpf：滑块控制控件大小并且移动
12-15
可以灵活的实现 缩放 移动功能· 希望能帮助到大家
WPF滑块控件(Slider)的自定义样式
weixin_30470857的博客
08-01 743
前言 每次开发滑块控件的样式都要花很久去读样式代码，感觉有点记不牢，所以特此备忘。 自定义滑块样式 首先创建项目，添加Slider控件。 然后获取Slider的Window样式，如下图操作。 然后弹出界面如下.我们点击确定。 点击确定后，我们的页面的Resources中，增加了一系列样式代码，而滑块代码会被修改为如下样子： <Slider HorizontalAli...
WPF 控件专题 Slider样式模板二
^@^lemon tea^@^
09-18 593
WPF Slider样式模板二
小程序组件 slider 的原生样式修改
qinnzheng
08-23 1565
小程序组件 slider
UE修改Widget的Slider滑块样式
专注GIS开发
12-22 1284
UE修改Widget的Slider滑块样式
修改Element-ui的滑块（slider）样式
m0_60618026的博客
03-28 1875
* 滑动条颜色 *//* 滑动轨颜色 *//* 滑块颜色 */
wpf 两滑块取中间值 样式修改
03-19
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中实现两个滑块（Slider）来选取中间值，并对其进行样式修改。WPF是.NET框架的一部分，提供了丰富的UI设计和用户体验构建工具。滑块控件通常...
微信小程序slider组件使用详解
08-28
例如，在上面的示例代码中，我们使用了WXSS来设置Slider组件的高度、行高和字体大小。 ```css .tui-slider-head, .tui-slider-box { height: 80rpx; line-height: 80rpx; font-size: 35rpx; color: #666; } ``` ...
WPF自定义进度条控件和slider 滑块控件
03-25
默认的`ProgressBar`样式可以通过引用`System.Windows.Controls.ProgressBar`的资源字典来获取，然后根据需要进行修改。例如，可以更改条纹的颜色、宽度、高度以及动画效果。此外，还可以通过数据绑定将进度值与业务...
js用拖动滑块来控制图片大小的方法
10-24
### JavaScript 控制图片大小的拖动滑块技术 #### 1. 概述 在Web页面中，实现图片大小的动态调整是一个常见需求。传统上，用户可能需要点击按钮或在选项中选择，然后页面重新加载或显示新大小的图片。然而，使用...
QT5Slider扩展.zip
05-24
`MySlider.cpp`和`MySlider.h`是这个自定义滑条的源代码文件，它们包含实现新特性和样式修改的逻辑。 在`MySlider.cpp`中，我们可以期待看到对`QSlider`类的继承，并且覆盖了其中的关键方法，如`paintEvent()`以...
滚动条样式更改 更改element UI 中Slider 滑块默认组件样式
Aa12364567的博客
08-03 1096
滚动条样式更改，更改element UI 中Slider 滑块默认组件样式
UISlider禁止Thumb拖动及滑块大小的改变
王大卓的专栏
12-06 5846
一、有时候只是想简单的显示播放进度，不想让Slider可以拖动，做法其实很简单，只用一下两步就可以了： 1、建立一个继承自UISlider的子类。 2、在新建的子类中添加下面这个方法： - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { return NO; } 以上方法可以禁止slider的拖动，如果想...
QSlider风格设置
最新发布
chenyijun的专栏
09-18 719
QT的滑动条在开发的过程中经常使用，默认的QSlider风格比较简陋，一般达不到UI设计的效果，本篇记录一个QSlider使用过程中风格的设置。4.内边距属性padding。3.外边距属性margin。1.qss常用的字段属性。2.边框属性boder。
原生js自定义slider滑块组件
qq564280420的博客
03-24 4335
通过鼠标事件和定位模拟滑块滑动
QML QtQuick.Controls 2 Slider滑块样式自定义
龚建波
10-03 2668
版本：Qt5.12.5 ，参考Qt源码及文档示例 代码链接：https://github.com/gongjianbo/QmlComponentStyle.git 自定义样式与默认样式的对比： 扁平样式实现代码： （本来想在原来的基础上增加个opposite direction相反方向的属性，奈何handle是和鼠标判定区域挂钩的，所以要做这个的话就不能用原来的handle，目前这...
Slider滑块组件
Grace_1203的博客
04-28 1851
初始（50）——箭头指向下一个（51）——home（0）——end（90）——上一页（70）——下一页（90）——箭头指向上一个（89）——箭头指向下一个（90）——拉动滑块两格（88） import org.eclipse.swt.SWT; import org.eclipse.swt.widgets.*; import org.eclipse.swt.layout.*; pub...
LVGL(72)-v8--滑块slider
bingquan3333的博客
09-13 1324
Slider对象看起来像一个带有旋钮的工具条。可以拖动该旋钮来设置一个值。滑块也可以是垂直的或水平的。滑动条在前面我们介绍img控件的时候有个历程有使用到，哪里我们讲述设置样式实现对滑动条的一些样式的设置。
el-slider节点样式修改
05-26
要修改 `el-slider` 组件的样式，可以使用以下两种方法： 1. 使用 scoped 样式 在 `el-slider` 组件所在的组件中添加 `scoped` 属性，然后在 `<style>` 标签中编写样式即可。例如： ```html <template> <el-slider v-model="value"></el-slider> </template> <script> export default { data() { return { value: 50 }; } }; </script> <style scoped> .el-slider__runway { height: 10px; background-color: #ccc; } .el-slider__bar { background-color: #409EFF; } .el-slider__button-wrapper { margin-top: -5px; } </style> ``` 在上面的例子中，我们使用了 `.el-slider__runway`、`.el-slider__bar` 和 `.el-slider__button-wrapper` 这三个类来修改 `el-slider` 的样式。 2. 使用全局样式 使用全局样式可以修改所有 `el-slider` 组件的样式。可以在 `App.vue` 或者其他全局组件中添加样式。例如： ```html <template> <el-slider v-model="value"></el-slider> </template> <script> export default { data() { return { value: 50 }; } }; </script> ``` 然后在 `<style>` 标签中编写样式： ```html <style> .el-slider__runway { height: 10px; background-color: #ccc; } .el-slider__bar { background-color: #409EFF; } .el-slider__button-wrapper { margin-top: -5px; } </style> ``` 在上面的例子中，我们使用了 `.el-slider__runway`、`.el-slider__bar` 和 `.el-slider__button-wrapper` 这三个类来修改 `el-slider` 的样式。这种方式会影响所有 `el-slider` 组件的样式，所以需要谨慎使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值