javascript - nouislider handle 超过了它的杆长

Question

我正在使用 nouislider在我的元素中，它工作正常。但是，当您更改 handle 宽度时， slider 似乎不会重新计算步长。

实例:

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>

还有 fiddle .

如您所见，handle 超出了“bar lenght”。

文档中说:

Responsive design friendly

有没有办法让它自动重新计算句柄的位置？或者我必须使用媒体查询或添加额外的 JS 逻辑才能使其工作？

谢谢

类似问题 - For NoUiSlider, how do I set the width of a handle/thumb?

---

更新:

From the docs:

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

根据 handle 位置，该元素获得 transform: translate(-1000%, 0px) 的动态值。也许应该在那个类上添加一些额外的 JS？

Answer 1

handle 可以是任意宽度，不受 slider 宽度的限制。您可以通过在 .noUi-target 上设置 padding 来实现您想要的效果。文档中提到了这一点 here .

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