javascript - 在范围输入的缩略图内放置一个值

Question

更新:下面的解决方案。

我有一个 slider ( <input type='range'../> ) 并且我在拇指中有一个值。这是一个粗略的表示:

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

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

整个变通办法工作得相当好......除了文本捕获用于拇指的事件，所以 slider 不会移动，而是选择文本。

我添加了 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 捕获了文本事件，但是试图在它下面的 slider 上触发它并没有做任何事情。

问题是:我如何实现该值(value)而不干扰用户交互？

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

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 使 slider 和 slider 具有我需要的外观，但请注意“不透明度”属性设置为(接近)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

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

这是文件上传中常用的技巧，将系统样式的 input[file] 替换为另一种表示形式。 More on the subject .