Ant Design Vue slider 在滑块上显示value

今天在项目上遇到一个滑块ui如下图所示：

由于本项目使用的ui库是Ant Design Vue，故第一时间去翻阅文档。
看了一圈发现组件并没有提供在滑块上显示当前值的属性，只有一个Tooltip提示，并不满足需求：

于是乎开始对滑块进行爆改。
首先在控制台检查滑块所在dom，发现滑块的视图主要由两个伪元素组成，一个撑起内容块（白色背景），一个是外面的圆。
于是对::after进行改造(不改before是因为after可以覆盖before，只用改一个无需多余代码)。样式完成后接下来就是取值问题。
由于滑块实际上是伪元素，而js目前做不到直接修改伪元素的值，所以只能另寻出路。 一番折腾之后找到一个最为优雅的做法，代码如下

    :deep(:where(.css-dev-only-do-not-override-1ihjqsc).ant-slider .ant-slider-handle::after){//滑块显示数值
        content: '第' attr(aria-valuenow) '页';
        width: 45px;
        height: 28px;
        top: -8px;
        left: -20px;
        background: #FFFFFF;
        color: #191D27;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        padding: 6px 4px;
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.04), 0px 0px 6px 0px rgba(0,0,0,0.05), 0px 0px 4px 0px rgba(0,0,0,0.08);
        border-radius: 23px 23px 23px 23px;
    }

这里用到了一个css表达式：attr()
CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素
attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的 也就是说只要把滑块的当前值注入到html的一个属性中就可以实现需求。此时在控制台检查滑块

发现箭头所指的属性值就是滑块组件的当前值！ 值得一提的是attr()还支持在content中连写，那么所有问题便迎刃而解。最终效果如下