nouislider handle passes its bar length

I'm using nouislider in my project, and it works fine. However, it seems when you change the handle width the slider doesn't recalculate the step length.

Live example:

var slider = document.getElementById('slider')

noUiSlider.create(slider, {
  start: [0],
  range: {
    min: 0,
    max: 4
  },
  step: 1
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.min.css">

<style>
  /* custom styles */
  
  .noUi-tooltip {
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }
  
  .noUi-target {
    height: 2px;
    border: 0;
    box-shadow: unset;
    background: #e6e6e6;
  }
  
  .noUi-horizontal .noUi-handle {
    width: 200px;
    height: 10px;
  }
  
  .noUi-handle {
    background-color: red;
    border-radius: 0;
    box-shadow: unset;
    border: 0;
    right: -100px;
  }
  
  .noUi-handle:after,
  .noUi-handle:before {
    content: unset;
  }
</style>

<div id="container">
  <div id="slider"></div>
</div>

Also the fiddle.

As you can see, the handle overflows the "bar lenght".

From the docs is says:

Responsive design friendly

Is there a way for it to automatically recalculate the handle position? Or I must use media queries or add extra JS logic for it to work?

Thanks

Update:

From the docs:

.noUi-origin - The elements connected to the base, defining the handle locations.

That element gets a dynamic value for the transform: translate(-1000%, 0px), depending on the handle position. Maybe some additional JS should be added on that class?

Solution

The handle can be any width, and isn't constrained by the slider width. You can achieve what you want by setting a padding on .noUi-target. That's mentioned in the documentation here.

.noUi-target {
    padding: 0 17px;
}
.noUi-connects {
    margin: 0 -17px;
    width: calc(100% + 34px);
}