gpt4 book ai didi

jquery - 如何停止 Handlebars 卡在 slider 上?

转载 作者:太空宇宙 更新时间:2023-11-04 07:43:45 24 4
gpt4 key购买 nike

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

我的 handle 非常大,这意味着如果你将它一直拖到右边,它就会悬在 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>

最佳答案

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

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>

关于jquery - 如何停止 Handlebars 卡在 slider 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48322997/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com