轨道修改，elementplus中修改

最新推荐文章于 2025-12-23 08:30:00 发布

原创最新推荐文章于 2025-12-23 08:30:00 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript #elementplus

element 专栏收录该内容

10 篇文章

订阅专栏

//先给组件起一个类名，我起的叫做price-slider
:deep(.price-slider) {
  .el-slider__runway {//这个是滑动之后的轨道，也就是拖拽之后遗留的轨道样式
    height: 2px;
    background-color: #f0f0f0;
  }

  .el-slider__bar {//这个是滑动之前的轨道样式，也就是页面打开第一眼看到的轨道样式
    height: 2px;
    background-color: #128A8C; 
  }

  .el-slider__button {//这个是轨道的左右两边的滑动按钮样式和鼠标悬浮样式
    width: 12px;
    height: 12px;
    border: 1px solid #128A8C;
    background-color: #fff;
    margin-top: -5px; /* 按钮垂直居中对齐轨道 */
    &:hover,
    &:active {
      box-shadow: 0 0 0 3px rgba(18, 138, 140, 0.2);
      transform: scale(1.05);
    }
  }

  .el-slider__stop {//刻度点
    width: 1px;
    height: 1px;
    background-color: #e0e0e0;/* 未选中的刻度点颜色 */
    &.el-slider__stop--active {
      background-color: #128A8C;/* 选中区间内的刻度点颜色（被 bar 覆盖的部分） */
    }
  }
}