nouislider 手柄超过了它的杆长

Question

我在我的项目中使用 nouislider，它运行良好。但是，当您更改 handle 宽度时，滑块似乎不会重新计算步长。

实例：

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

有没有办法让它自动重新计算handle位置？或者我必须使用媒体查询或添加额外的 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) 的动态值。也许应该在 class?

上添加一些额外的 JS

Answer 1

手柄可以是任意宽度，不受滑块宽度的限制。您可以通过在 .noUi-target 上设置 padding 来实现您想要的效果。文档 here.

中提到了这一点

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

nouislider 手柄超过了它的杆长

nouislider handle passes its bar length

javascript

css

nouislider

responsive