我在让圆手柄与nouislider配合使用时遇到麻烦

Question

我正在使用以下样式：

/** noUISlider overrides */
.noUi-horizontal
  height: 20px

.noUi-target
  background: #e0e0e0
  border-radius: 20px
  border: 0
  box-shadow: none

.noUi-connect
  background: #21528d
  margin: 0 10px

.noUi-handle
  border-radius: 10px
  border: 2px solid #21528d
  box-shadow: none
  width: 20px !important
  height: 20px !important
  left: 0px !important
  top: 0px !important

.noUi-handle-upper
  left: -20px !important

.noUi-handle:after
  display: none

.noUi-handle:before
  width: 8px
  height: 8px
  border-radius: 10px
  top: 4px
  left: 4px
  background: #c3c3c3

哪个会导致此滑块：

这正是我想要的。当我将上手柄一直滑到0时会出现问题：

右侧的上限锚点和左侧的下限锚点...。这意味着上限实际上滑过了下限，并位于上一个屏幕快照的左侧。

它必须是一个简单的样式调整，但是我还无法弄清楚该如何做，我希望有人已经解决了这个问题并可以分享答案。