Question

更新：以下解决方案。

我有一个滑块（<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制作了我需要的外观的滑块和拇指，除了注意＆＃34;不透明度＆＃34;属性设置为（近）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

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

1 个答案: