滑块旋钮上范围滑块的文本标签

Question

我在音频应用程序中经常使用范围滑块，并且目前在滑块光标上放置一个.jpg以使其看起来更好。我现在想做的是在与滑块一起移动的滑块光标的顶部添加文本，但是我无法解决此问题。显然，一种方法是创建大量.jpg，但我希望有一种使用CSS和/或Javascript的方法。

有什么建议吗？

我知道有几种方法可以在滑块光标旁边显示一个值，但是一旦将文本放在其顶部，就无法移动滑块。

当前CSS是

.slider
{
    display: inline-block;
    width: 2.2vw;
    margin-left : 6.8vw;
    opacity: 0;
}

.slider input
{
    -webkit-appearance: none;
    appearance: none;
    width: 22vw;
    height: 1vw;
    background: rgba(0,0,0,0);
    outline: none;
    transform-origin: 11.5vw 11.5vw;
    transform: rotate(-90deg);
}

.slider input::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border: 0vw;
    background-position: center;
    background: url('slider.jpg');
    cursor: pointer;
}