如何解决jQuery Slider自定义手柄超出滑块栏的响应式问题？

这个问题我之前也碰到过，默认的jQuery UI滑块是把手柄的左上角作为定位基准的，所以当你的手柄尺寸偏大时，拖到最右端自然会超出滑块栏，而固定的负边距又会在左侧拖动手柄时导致偏移。下面给你一个响应式的解决方案，能让手柄的两端完美对齐滑块栏的左右边界：

核心思路 #

1. 给滑块容器添加左右内边距，值等于手柄宽度的一半，这样手柄的移动范围会向内收缩，避免超出滑块栏的边界
2. 使用transform: translateX(-50%)让手柄始终以自身中心对齐滑块的拖动位置，代替固定的负边距，这样不管手柄在哪个位置都能保持居中定位

修改后的完整代码 #

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
#slider {
  /* 添加左右内边距，值为手柄宽度的一半（20%/2=10%） */
  padding-left: 10%;
  padding-right: 10%;
}
#slider .ui-slider-track {
  /* 抵消滑块容器的padding，让轨道铺满容器，保持视觉上的满宽 */
  margin: 0 -10%;
}
#custom-handle {
  width: 20%;
  background: transparent;
  height: 57px;
  background-image: url(https://s3-eu-west-1.amazonaws.com/quizdu/redslider.png);
  top: 0%;
  border: none;
  margin-top: -1.8em;
  background-size: 100%;
  text-align: center;
  line-height: 1.6em;
  /* 用transform代替固定margin-left，实现自适应居中定位 */
  transform: translateX(-50%);
}
.container {
  max-width: 500px;
  margin: 0 auto;
}
body {
  padding-top: 50px;
  background: grey;
}
</style>
<div class="container">
  <div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
  </div>
</div>
<script>
var handle = $("#custom-handle");
$("#slider").slider({
  create: function() {
    handle.text($(this).slider("value"));
  },
  slide: function(event, ui) {
    handle.text(ui.value);
  }
});
</script>

为什么这样有效？ #

• 响应式适配：所有尺寸都是百分比，不管容器max-width怎么调整，手柄宽度和滑块的padding都会按比例适配，不会出现错位
• 精准定位：transform: translateX(-50%)会让手柄的中心点和滑块的拖动位置对齐，拖到最左端时，手柄左边缘刚好对齐滑块栏左边缘；拖到最右端时，手柄右边缘刚好对齐滑块栏右边缘
• 视觉完整性：通过调整ui-slider-track的margin，滑块轨道会铺满整个容器，不会因为滑块容器的padding出现左右空白，保持视觉连贯性

你可以直接复制这段代码测试，拖动滑块看看效果，应该能完美解决你的问题！

内容的提问来源于stack exchange，提问作者ProEvilz