将值放在范围输入的拇指内

Question

更新: 下面的解决方案.

我有一个滑块(<input type='range'../>),我在拇指内有一个值.这是一个粗略的表示:

        ______
_______/      \______
|______: [42] :______|
       \______/

问题是拇指不支持内容所以我将值放在a中<div><span class='noselect'>[42]</span></div>并left: ?px使用javascript 计算一些以移动div以匹配拇指.

这整个解决方案工作得相当好......除了文本捕获用于拇指的事件,因此滑块不会移动而是正在选择文本.

我添加了css来阻止实际的文本选择:

.noselect {
    -moz-user-select:-moz-none;
    -moz-user-select:none;
    -o-user-select:none;
    -khtml-user-select:none;  
    -webkit-user-select:none; 
    -ms-user-select:none;
    user-select:none; 
    display: block;
}

但上面的CSS并不能防止鼠标事件被文本而不是拇指消耗.

最重要的是,我尝试将事件转移到拇指:

$(document).on('click touchstart touchend touchmove', '.noselect', function (event) {
    var slider = $(this).parents('.slider').first();
    if (slider && slider.length > 0) {
        slider.trigger(event.type, event);
        event.stopPropagation();
        return false;
    } 
});

上面的js捕获文本事件,但试图在它下面的滑块上触发它不会做任何事情.

问题是:如何使该值发生并且不干扰用户交互？

拇指本身的样式就像一个圆圈:

input[type="range"]:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #404040;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #404040; 
    border: none; 
}

UPDATE

我根据下面接受的答案解决了这个问题.这是CSS的样子:

下面的CSS使我需要的外观的滑块和拇指,除了注意"不透明度"属性设置为(接近)0:

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    opacity: 0.0;
    stroke-opacity: 0.0;
    height: 26px; 
    border-radius: 0px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #808080;
    width: 54px;
    height: 54px;
    opacity: 0.02;
    stroke-opacity: 1.0;
    border-radius: 26px;
    background-color: #F0F0F0; 
    border: none;
}

我用不同的名称(sliderBackground,sliderThumb)复制了这些样式,并将它们应用到以下位置之前的-s:

42

Answer 1

您可以尝试将输入放在顶部，并使其透明，而不是相反。然后自己添加拇指并设计其样式。

\n\n

它\xe2\x80\x99是文件上传中使用的常见技巧，用另一种表示形式替换系统样式input[file]。有关该主题的更多信息。

\n