问题描述
我有一些项目，希望通过某些条件（评分，但可以是其他任何条件）进行过滤。 为此，我有一个jQuery UI滑块：
$("#rating_slider").slider({ range: true, step: 0.5, min: 1, max: 10, values: [3, 10], animate: "slow", orientation: "horizontal", slide: function(event, ui) { $("#amount").text(ui.value); } });
.toolbar { padding: 10px 15px; background: #efefef; border: 1px solid #ddd; margin: 0 10px 10px 10px; } #slider-container { position: relative; } #rating_slider { width: 200px; background: #fff; } #amount { position: absolute; transform: translateX(-50%); bottom: -27px; display: none; line-height: 20px; width: 40px; border: 1px solid #e2e2e2; background-color: #fff; border-radius: 2px; color: #777; font-size: 11px; text-align: center; z-index: 2; } #rating_slider:active #amount { display: inline-block; margin-left: 20px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" /> <div class="toolbar rounded-sm clearfix"> <div class="d-inline-block pl-4" id="slider-container"> <p class="my-0 pr-3 d-inline-block">Filter by rating:</p> <div id="rating_slider" class="d-inline-block"> <div id="amount">3</div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
我有一个“气泡”，显示UI滑块的当前值 。
气泡的position: absolute;
和bottom: -27px;
因此将其正确垂直放置（在Oy轴上）。
但是它的left位置应该是动态的 ，以便气泡可以跟上（左）手柄。
我无法实现这一目标。
什么是最简单，最“稳健”的方法？
更新：
我已经捕获了句柄的style属性，该属性应该很有用，但无法在#amount element上进行设置 ：
$("#rating_slider").slider({
range: true,
step: 0.5,
min: 1,
max: 10,
values: [3, 10],
animate: "slow",
orientation: "horizontal",
slide: function(event, ui) {
var bubblex = $(this).find('.ui-state-focus').attr('style');
console.log(bubblex);
$(this).find("#amount").css({
"left": bubblex
});
}
});
如何将其设置为#amount ？
1楼
Hemant Parashar
1
2019-03-03 16:27:36
您可以使用滑块的值设置相对于元素的left位置。
基本思想是将值转换为滑块宽度的某些百分比。
$("#rating_slider").slider({
range: true,
step: 0.5,
min: 1,
max: 10,
values: [3, 10],
animate: "slow",
orientation: "horizontal",
slide: function(event, ui) {
$("#amount").text(ui.value);
//Set the 'left' position dynamically
$("#amount").css(
"left", `${ ui.value*10 + "%" }`
);
});
或根据您的编辑
$("#rating_slider").slider({
range: true,
step: 0.5,
min: 1,
max: 10,
values: [3, 10],
animate: "slow",
orientation: "horizontal",
slide: function(event, ui) {
var bubblex = $(this).find('.ui-state-focus').css('left');
console.log(bubblex);
$(this).find("#amount").css(
"left", bubblex
);
}
});
2楼
Towkir
1
已采纳
2019-03-04 06:11:57
由于您在将百分比值转换为像素时遇到麻烦，因此，我宁愿将#amount元素移到其他位置以更好地定位自身。
让我们尝试在幻灯片开始时将其移动到那些.ui-state-focus锚中。
$("#rating_slider").slider({ range: true, step: 0.5, min: 1, max: 10, values: [3, 10], animate: "slow", orientation: "horizontal", slide: function(event, ui) { //$("#amount").text(ui.value); $(this).find('.ui-state-focus').append($(this).find('#amount').text(ui.value)); //move the amount inside of an active anchor and update it's text value; } });
.toolbar { padding: 10px 15px; background: #efefef; border: 1px solid #ddd; margin: 0 10px 10px 10px; } #slider-container { position: relative; } #rating_slider { width: 200px; background: #fff; } #amount { position: absolute; transform: translateX(-50%); bottom: -27px; display: none; line-height: 20px; width: 40px; border: 1px solid #e2e2e2; background-color: #fff; border-radius: 2px; color: #777; font-size: 11px; text-align: center; z-index: 2; left: 50%; /* as it's translated to -50%; put a left value of 50% to center align; */ } #rating_slider:active #amount { display: inline-block; /*margin-left: 20px;*/ /* remove the margin */ }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" /> <div class="toolbar rounded-sm clearfix"> <div class="d-inline-block pl-4" id="slider-container"> <p class="my-0 pr-3 d-inline-block">Filter by rating:</p> <div id="rating_slider" class="d-inline-block"> <div id="amount">3</div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
我希望这能解决您的问题。
3楼
Razvan Zamfir
1
2019-03-04 08:02:56
这是带有指示器的版本，仅在使用（移动）手柄时才显示指示器，并且在视觉上有所改进。 希望对更多开发人员有所帮助。
$("#rating_slider").slider({ range: true, step: 0.5, min: 1, max: 10, values: [3, 10], animate: "slow", orientation: "horizontal", slide: function(event, ui) { $(this).find('.ui-state-focus').append($(this).find('#amount').show().text(ui.value)); } });
.toolbar { padding: 10px 15px; background: #efefef; border: 1px solid #ddd; margin: 10px; } #slider-container { position: relative; } #rating_slider { width: 200px; background: #fff; } #amount { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); display: none; line-height: 16px; width: 36px; border: 1px solid #e2e2e2; background-color: #fff; border-radius: 2px; color: #777; font-size: 11px; text-align: center; } #amount:after, #amount:before { z-index: 3; position: absolute; border-style: solid; border-width: 0 4px 4px; content: ""; height: 0; width: 0; right: auto; } #amount:before { top: -5px; left: 14px; border-color: transparent transparent #e2e2e2; } #amount:after { top: -4px; left: 14px; border-width: 0 4px 4px; border-color: transparent transparent #fff; } .ui-state-focus, #amount { outline: none !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" /> <div class="toolbar rounded-sm clearfix"> <div class="d-inline-block pl-4" id="slider-container"> <p class="my-0 pr-3 d-inline-block">Filter by rating:</p> <div id="rating_slider" class="d-inline-block"> <div id="amount">3</div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>