Platzieren eines Wertes innerhalb des Daumens eines Bereichseingangs

Question

UPDATE: Lösung unten.

Ich habe einen Schieberegler (<input type='range'../>) und ich habe einen Wert in den Daumen. Hier ist eine grobe Darstellung:

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

Problem ist der Daumen nicht zufrieden unterstützt das so bin ich Platzieren Sie den Wert in einem <div><span class='noselect'>[42]</span></div> und einige left: ?px mit Javascript berechnen die div zu bewegen über den Daumen zu entsprechen.

Dieser ganze Workaround funktioniert ziemlich gut ... außer der Text erfasst Ereignisse, die für den Daumen gedacht sind, so dass der Schieberegler nicht bewegt und stattdessen der Text ausgewählt wird.

Ich habe CSS hinzugefügt, um die tatsächliche Textauswahl zu verhindern:

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

aber die oben CSS nicht das Maus-Ereignis verhindern, indem sie den Text anstelle des Daumens verbraucht werden.

Obendrein machte ich einen Versuch, das Ereignis an den Daumen zu übertragen:

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

Die oben js fängt den Text Ereignis, sondern versuchen, es auf dem Schieber auszulösen darunter nichts tut.

Frage ist: Wie mache ich diesen Wert passieren und nicht die Benutzerinteraktion stören?

Der Daumen selbst wie ein Kreis ist gestylt:

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

ich das Problem behoben unten auf der Grundlage der Antwort akzeptiert. Hier ist, was die CSS wie folgt aussehen:

die folgenden CSS den Schieber und den Daumen der Erscheinung machen die ich brauchte, außer Notiz des „Undurchsichtigkeit“ Attribut gesetzt ist (in der Nähe) 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; 
} 

Die I kopiert diese Arten unter verschiedenen Namen (sliderBackground, SliderThumb) und wandten sich vor dem platziert sich:

Answer 1

Sie könnten versuchen, den Eingang an der Spitze zu setzen, und machen es transparent Inste Anzeige umgekehrt. Fügen Sie dann den Daumen hinzu und stylen Sie ihn selbst.

Es ist ein häufiger Trick bei Datei-Uploads, das System-gestylt input[file] durch eine andere Darstellung zu ersetzen. More on the subject.