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溢出了“栏长度”。

从文档说：

友好的响应式设计

有没有一种方法可以自动重新计算handle排名？还是我必须使用媒体查询或添加额外的JS逻辑才能使其正常工作？

谢谢

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

更新：

From the docs:

.noUi-origin-连接到基座的元素，定义手柄位置。

该元素将根据transform: translate(-1000%, 0px)的位置获取handle的动态值。也许应该在该类上添加一些其他的JS？

Answer 1

手柄可以是任何宽度，并且不受滑块宽度的限制。您可以通过在padding上设置.noUi-target来实现所需的目标。 here文档中提到了这一点。

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

nouislider手柄通过其杆长

1 个答案: