6

UPDATE: solution below.

I have a slider ( <input type='range'../> ) and I have a value inside the thumb. Here's a crude representation:

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

Problem is the thumb doesn't support content so I'm placing the value in a <div><span class='noselect'>[42]</span></div> and calculate some left: ?px with javascript to move the div to match over the thumb.

This whole work-around works reasonably well... except the text captures events that are intended for the thumb, so the slider doesn't move and the text is being selected instead.

I've added css to prevent the actual text selection:

.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;
}

but the above CSS doesn't prevent the mouse event to be consumed by the text instead of the thumb.

On top of that I made an attempt to transfer the event to the thumb:

$(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;
    } 
});

The above js captures the text event but trying to trigger it on the slider under it doesn't do anything.

Question is: how do I make that value happen and not interfere with the user interaction?

The thumb itself is styled like a circle:

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

I resolved the issue based on the accepted answer below. Here's what the CSS looks like:

the CSS below makes the slider and thumb of the appearance I needed, except note the "opacity" attribute is set to (near) 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;
}

The I copied these styles under different names (sliderBackground, sliderThumb) and applied them to -s placed before the :

42
4

1 回答 1

1

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

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

于 2013-10-30T20:12:59.030 回答