title: Prevent overlapping range values on a slider (noUiSlider)
body: <p>I have a set of 3 ranges on a slider consisting of 30 days and beyond (see <a href="https://codepen.io/nlourenco/pen/KKMWLXQ" rel="nofollow noreferrer">CodePen</a>). At the moment, the values between the 3 ranges overlap by one day.</p>
  <pre class="lang-js prettyprint-override"><code>var slider = document.getElementById(&quot;slider&quot;);
  var unconstrainedValues = document.getElementById(&quot;unconstrained-values&quot;);
  
  noUiSlider.create(slider, {
      start: [0, 7],
      padding: [0, 1],
      connect: [true, true, true],
      range: {
          min: 0,
          max: 31
      },
      pips: {
          mode: &quot;values&quot;,
          values: [0, 7, 14, 21, 28, 30],
          density: 3
      },
      step: 1,
      range: {
          min: [0],
          max: [31]
      },
      format: wNumb({
          // https://refreshless.com/wnumb/
          decimals: 0,
          mark: &quot;.&quot;,
          thousad: &quot;,&quot;,
          prefix: &quot;&quot;
          // suffix: ' p.p.'
      }),
      tooltips: true
  });
  
  var nodes = [
      document.getElementById(&quot;daily-rate-a&quot;), // 0
      document.getElementById(&quot;daily-rate-b&quot;), // 0
      document.getElementById(&quot;daily-rate-c&quot;) // 0
  ];
  
  slider.noUiSlider.on(&quot;update&quot;, function (
      values,
      handle,
      unencoded,
      isTap,
      positions
  ) {
      nodes[handle].innerHTML = values[handle];
  });
  
  // var tooltips = document.querySelectorAll('.noUi-tooltip');
  // console.log(tooltips);
  // tooltips.forEach(tooltip =&gt; tooltip.classList.add('tooltips-active'));
  
  var input1 = document.getElementById(&quot;input1&quot;);
  var input2 = document.getElementById(&quot;input2&quot;);
  var input3 = document.getElementById(&quot;input3&quot;);
  var inputs = document.querySelectorAll(&quot;.form-control&quot;);
  
  var connect = slider.querySelectorAll(&quot;.noUi-connect&quot;);
  var classes = [&quot;c-1-color&quot;, &quot;c-2-color&quot;, &quot;c-3-color&quot;];
  
  for (var i = 0; i &lt; connect.length; i++) {
      connect[i].classList.add(classes[i]);
  }
  
  slider.noUiSlider.on(&quot;update&quot;, function (values) {
      unconstrainedValues.innerHTML = values.join(&quot; - &quot;);
  });
  </code></pre>
  <p>Current result:</p>
  <ul>
  <li>0-15</li>
  <li>15-20</li>
  <li>20-Infinity</li>
  </ul>
  <p>Desired result:</p>
  <ul>
  <li>0-15</li>
  <li>16-20</li>
  <li>21-Infinity</li>
  </ul>
  <p>Essentially, the start of the next range should never be the same value as the end of the previous range. (Both 0 in Range A and Infinity in Range C are static and never change.) How do I accomplish this?</p>