How to Make noUiSlider Handle Overlap Another

I have noUiSlider range slider with 3 handles, how to make one handle (in this example the blue handle in the center) can overlap another handle? I mean the blue handle movement is not limited by another handle position. Is that possible with noUiSlider?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
            start: [30, 50, 75],
            step: 1,
            range: {
                'min': 0,
                'max': 100
            },
            connect: true,
            handleAttributes: [{
                        'class': 'noUi-handle'
                    },
                    {
                        'class': 'noUi-handle center-post'
                    },
                    {
                        'class': 'noUi-handle'
                    }
                ],
        });

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
  background: #21A1FF;
  border: 1px solid #21A1FF;
  box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
}
</style>

<!-- end snippet -->

Thanks

To allow any handle to pass (e.g. not be limited by) other handles, you can pass the behaviour: 'unconstrained' option. For example:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

var slider = document.getElementById("slider");

noUiSlider.create(slider, {
start: [30, 50, 75],
step: 1,
range: {
min: 0,
max: 100
},
connect: true,
behaviour: "unconstrained", // Added
handleAttributes: [
{
class: "noUi-handle"
},
{
class: "noUi-handle center-post"
},
{
class: "noUi-handle"
}
]
});

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
  background: #21A1FF;
  border: 1px solid #21A1FF;
  box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
}
</style>

<!-- end snippet -->