noUiSlider透過度

Question

私はnoSiider範囲スライダを使用しています。ここでjsfiddleです：

https://jsfiddle.net/oun5p1xz/

behaviourSlider = document.getElementById('slider'); 

noUiSlider.create(behaviourSlider, { 
    start: [ 30, 40 ], 
    step: 10, 
    behaviour: 'drag', 
    connect: true, 
    range: { 
     'min': 20, 
     'max': 80 
    } 
}); 

私はスライダーを透明にしたい、と選択範囲のみをカラーを持っている必要がありますが、これまでのところ、私は右の部分を透明にするときので、私は基本的な範囲の色を見ることを実現します：

https://jsfiddle.net/oun5p1xz/1/

あなたは、任意のアイデアを持っていますか？

更新日：

を私はスライダーの背景を画像になりたい：限り、私のコメントは、あなたがまだそれを微調整することができますことはできません言ったように

Answer 1

。スライダの背景が、たとえばbodyまたはdivまたは他のDOMオブジェクトの背景と同じであることを確認する必要があります。次に、目的の結果が得られます。これは私が使用するCSSです：

アクションでライブ

body{ 
    background-color:#fff; 
    margin:20px; 
} 
#slider { 
     background: rgba(255,255,255,0); 
} 
.noUi-target{ 
    border:0; 
    box-shadow:none 
} 
#slider .noUi-background { 
    background: #fff; 
    box-shadow:none; 
} 

：

body{ 
    margin:20px; 
} 
#slider { 
     background: rgba(255,255,255,0); 
} 
.noUi-connect{ 
    background: transparent; 
    box-shadow:none; 
} 
.noUi-base{ 
    background-color: transparent; 
    background-image:url(http://wallpapercave.com/wp/tmx6W6N.png); 
} 
#slider .noUi-background { 
    background: transparent; 
    box-shadow:none; 
} 

：あなたの更新の質問私はCSSを変更し、今私は、次のCSSを使用することに基づいてJSFIDDLE

---

ライブデモJSFIDDLE