在范围输入的拇指内放置一个值

Placing a value inside the thumb of a range input

本文关键字：一个 输入 范围      更新时间：2023-09-26

更新：下面的解决方案。

我有一个滑块（<input type='range'../>），拇指内有一个值。这是一个粗略的表示：

        ______
_______/      '______
|______: [42] :______|
       '______/
问题是拇指

不支持内容，所以我将值放在一个<div><span class='noselect'>[42]</span></div>中，并使用 javascript 计算一些left: ?px以移动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; 
}

更新

我根据下面接受的答案解决了这个问题。以下是 CSS 的外观：

下面的 CSS 使我需要的外观的滑块和拇指，除了注意"opacity"属性设置为（接近）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

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

这是文件上传中使用的常用技巧，将系统样式的input[file]替换为另一种表示形式。更多关于这个主题。

相关文章：