Placing a value inside the thumb of a range input

Question

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

Answer 1

You could try to put the input on top, and make it transparent instead of the other way around. Then add and style the thumb yourself.

It’s a common trick used in file uploads, to replace the system-styled input[file] with another representation. More on the subject.