noUiSlider transparency
<p>I am using noUiSlider range slider. Here is jsfiddle:</p>

<p><a href="https://jsfiddle.net/oun5p1xz/" rel="nofollow noreferrer">https://jsfiddle.net/oun5p1xz/</a></p>

<pre><code>behaviourSlider = document.getElementById('slider');

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

<p>I want to make slider transparent, and only selected range should have color, but so far I achieve that because when I make right part transparent I see underlying range color:</p>

<p><a href="https://jsfiddle.net/oun5p1xz/1/" rel="nofollow noreferrer">https://jsfiddle.net/oun5p1xz/1/</a></p>

<p>Do you have any ideas? </p>

<p>UPDATED:</p>

<p>I want slider background to be an image:
<a href="https://i.stack.imgur.com/ZUwzV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZUwzV.png" alt="enter image description here"></a> </p>