如何停止处理悬垂滑块？答案

【问题标题】：How to stop handle over hanging the slider?如何停止处理悬垂滑块？
【发布时间】：2018-01-18 13:54:46
【问题描述】：

我正在使用带有自定义句柄的jQuery Slider。

我的手柄很大，这意味着如果你把它一直拖到右边，它就会悬在滑动条的末端......

使用类似的方法：

margin-left:-50%;

仅在右侧 (100%) 时有效，但如果您将其向左移动，则负边距会将其从该侧拉出屏幕。

如何在保持响应速度的同时解决这个问题？如果有意义的话，我想得到它，以便句柄/图像的末端与每个条的末端平行。

var handle = $("#custom-handle");
$("#slider").slider({
  create: function() {
    handle.text($(this).slider("value"));
  },
  slide: function(event, ui) {
    handle.text(ui.value);
  }
});

#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;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

body {
  padding-top: 50px;
  background: grey;
}

<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>
<div class="container">
  <div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
  </div>
</div>

【问题讨论】：

标签： jquery css jquery-ui uislider

【解决方案1】：

如果将值转换为百分比，并将其乘以手柄的宽度，则可以将其用作偏移量

var handle = $("#custom-handle"),
    handleWidth = handle.width();
$("#slider").slider({
  create: function() {
    handle.text($(this).slider("value"));
  },
  slide: function(event, ui) {
    handle.text(ui.value);
    handle.css({
        'margin-left': 0 - ((ui.value / 100) * handleWidth)
    });
  }
});

#custom-handle {
  width: 20%;
  background: transparent;
  height: 57px;
  background-color: #0099ff;
  top: 0%;
  border: none;
  margin-top: -1.8em;
  background-size: 100%;
  text-align: center;
  line-height: 1.6em;
}

.container {
  max-width: 500px;
  margin: 0 auto;
}

body {
  padding-top: 50px;
  background: grey;
}

<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>
<div class="container">
  <div id="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
  </div>
</div>

【讨论】：