UPDATE: below.
I have a slider ( <input type='range'../> ) and I have a value inside the thumb. Here's a rough idea:
______ _______/ \______ |______: [42] :______| \______/
The problem is that the thumb does not support the content, so I put the value in <div><span class='noselect'>[42]</span></div> and compute some left: ?px with javascript so that move the div according to the thumb.
All this work works quite well ... except that the text captures events designed for the thumb, so the slider does not move and text is selected instead.
I 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 does not prevent the use of mouse events with text instead of the thumb.
In addition, I tried to transfer the event to my 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 capture a text event, but trying to fire it on the slider below it does nothing.
Question: how can I make this value and not interfere with user interaction?
The thumb has a circle style:
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 solved the problem based on the answer below. Here's what CSS looks like:
The CSS below makes the slider and thumb visible to me, except that the "opacity" attribute is set (next) to 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; }
I copied these styles under different names (sliderBackground, sliderThumb) and applied them to the -s placed before:
42