How to Make noUiSlider Handle Overlap Another

Question

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?

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'
                    }
                ],
        });

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

Thanks

Answer 1

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

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"
    }
  ]
});

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