Aşağıdaki aralıkta

Question

UPDATE: aralık girişinin başlığının içine bir değer yerleştirme.

Bir kaydırıcım var (<input type='range'../>) ve başlığın içinde bir değere sahibim. İşte ham gösterimi var:

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

Sorun başparmak yüzden bir <div><span class='noselect'>[42]</span></div> değeri yerleştirerek ediyorum içeriği desteklemek ve başparmak üzerinde maç için div taşımak için javascript ile bazı left: ?px hesaplamaz olduğunu.

Tüm bu etraflıca işler makul ölçüde iyi işliyor ... metinler, başparmak için tasarlanmış olayları yakalar, böylece kaydırıcı hareket etmiyor ve metin seçiliyor.

Ben gerçek metin seçimini engellemek için css ekledik:

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

ama fare olayı engellemez Yukarıdaki CSS yerine Başparmak metin ile tüketilmesi.

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

yukarıdaki js metin olayı yakalar ama hiçbir şey yapmaz altında kaydırıcıdaki tetiklemek için çalışıyor:

Bunun üzerine ben başparmak olay aktarmak için bir girişimde bulunmuştur.

Soru: Bu değeri nasıl yaparım ve kullanıcı etkileşimini etkilemiyor?

başparmak kendisi

bir daire gibi dekore edilir:

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

GÜNCELLEME

aşağıda kabul Yanıta göre sorunu çözüldü.

CSS aşağıda ihtiyacım görünüm sürgüsünü ve başparmak yapar "donukluk" özelliği (yakın) 0 olarak ayarlanır not hariç:

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

Ben kopyalanan İşte böyle CSS nasıl göründüğü ve bu farklı isimler altında stilleri (sliderBackground, sliderThumb) ve onları önce yerleştirilmesi -s uygulanan:

Answer 1

üstüne girişi koymak deneyin ve yapabilir saydam inste diğer tarafın reklamı. Ardından baş parmağınızı kendiniz ekleyin ve stilleyin.

Sistemdeki input[file]'u başka bir gösterimle değiştirmek için dosya yüklemelerinde kullanılan yaygın bir numaradır. More on the subject.