vue3+ts 自定义el-slider，原点显示数字

vue3+ts 自定义el-slider，原点显示数字

先看效果图：

这里我默认使用的是element-Plus的el-slider组件
原始效果是这样的:

可以查看官网自行查看：https://element-plus.gitee.io/zh-CN/component/slider.html

如何实现的呢：

这里先说一下原理，使用的原理是css的content属性，如果不知道的请自行学习后查看本文。在结合::after和::before伪元素结合;

第一

看页面html+css判断进行操作的class是谁?

主要修改.el-slider__button-wrapper 修改el-slider__button是为了把原点改成方形,这样可以显示更多内容;其代码是:

// 改变滑块原点大小和颜色  el-slider__button
:deep() .el-slider__button {
    color: red;
    width: 40px;
    height: 30px;
    border-radius: 10px;
    z-index: 1;
    top: var(--el-slider-button-wrapper-offset);
    // transform: translateX(-50%);
    background-color: #fff;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    outline: 0;
}

// 更改 el-slider__button-wrapper
:deep() .el-slider__button-wrapper {
    height: var(--el-slider-button-wrapper-size);
    width: var(--el-slider-button-wrapper-size);
    position: absolute;
    z-index: 1;
    top: var(--el-slider-button-wrapper-offset);
    transform: translateX(0); // 去掉滑块默认X轴翻转
    background-color: transparent;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    outline: 0;
}

// 滑块中间显示内容
:deep() .el-slider__button-wrapper::before {
	content: attr(aria-valuetext);// !!显示的内容,注意,一定是这个
	position: absolute;
	width: 20px;
	height: 25px;
	line-height: 25px;
	border-radius: 5px;
	text-align: center;
	top: 5px;
	left: 7.5px;
  font-size: 12px;
  z-index: 999;
}

// 去掉滑块默认鼠标移入事件
:deep() .el-slider__button-wrapper.hover {
	transform: none;
}
:deep() .el-slider__button-wrapper::hover {
  transform: none;
}

:deep() .el-slider__button.hover {
  transform: none;
}
:deep() .el-slider__button::hover {
  transform: none;
}



// 去掉input 边框和输入聚焦
:deep() .el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    cursor: text;
    transition: var(--el-transition-box-shadow);
    transform: translate3d(0,0,0);
    box-shadow: none;
}

:deep() .el-input__wrapper.is-focus{
  box-shadow: none;
}

:deep() .el-input__wrapper:hover{
  box-shadow: none;
}

这个我写的不是很清楚，下次进行编辑吧，太晚了。上面是全部的css代码，如果是使用的vue3+ts+scss的，可以复制粘贴进行使用。注意添加scoped范围；