jQuery ui 滑块 - div 外的 ui 滑块句柄答案

【问题标题】：jQuery ui slider - ui slider handle out of divjQuery ui 滑块 - div 外的 ui 滑块句柄
【发布时间】：2020-03-05 12:35:26
【问题描述】：

请帮我解决我的问题... 右侧.ui-slider-handle不超过div

时如何以及在哪里设置

Live preview https://codepen.io/Melwee/pen/Exjwoyo

这里有一张图片来说明我的意思

【问题讨论】：

答案已编辑。请参阅我使用左右边框颜色的替代方法

标签： jquery css jquery-ui

【解决方案1】：

嗯。我不知道你是否会接受这个作为答案，但实际上你的问题没有合适的答案。在这件事上只能给你一些不同的观点。

我想如果你添加一些margin-left 到.ui-slider-handle 就像：

margin-left: -25px;

然后扩展 .lc-slider 的 padding 喜欢：

padding: 5px 20px;

它会更好看。

https://codepen.io/batuhabibi/pen/MWwEQKX

【讨论】：

感谢您的回答，但它仍然无法解决我的问题，它仍然通过 div....抱歉，但我不明白您的评论...我来自斯洛伐克。 ..而且我英语不太好...谷歌翻译也帮我翻译了

【解决方案2】：

您需要将左边距设置为光盘大小的一半，例如border-radius。之后，将滑块的左右边框设置为与小部件相同的颜色：

.ui-slider .ui-slider-handle {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  border: 14px solid #f9f9ff;
  height: 53px;
  width: 53px;
  border-radius: 27px;
  background: #ff4c60;
  cursor: pointer;
  margin-top: -9px;
  margin-left: -27px; /* set margin to 0.5 the width */
}

.ui-slider.ui-slider-horizontal {
  border-left: 25px solid #ff4c60 !important;
  border-right: 24px solid #ffffff !important;
}
.ui-slider.ui-slider-horizontal .ui-slider-range-min {
  border-radius: 0;
}

之后，你只需要调整页脚：

.lc-slider-footer {
    width: 100%;
    padding: 7px 4px; /* adjust footer */
    display: flex;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
}

【讨论】：