使滑块气泡跟上左手柄
Make slider bubble keep up with the left handle
我有一个项目集合,我希望按某些条件(评分,但也可以是其他任何条件)进行过滤。为此,我有一个 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>
我有一个 "bubble" 显示 当前值 UI 滑块。气泡有 position: absolute;
和 bottom: -27px;
,所以它垂直放置(在 Oy 轴上)。
但是它的left
位置应该是动态,这样气泡就会跟上(左)手柄。
我没能做到。
最简单、最"robust"的方法是什么?
更新:
我已经捕获了句柄的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
?
您可以使用滑块的值来设置相对于元素的 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
);
}
});
由于您在将百分比值转换为像素时遇到问题,我宁愿将 #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>
希望这能解决您的问题。
这是一个仅在使用(移动)手柄时才显示指示器的版本,并进行了一些视觉上的改进。希望对更多开发者有所帮助
$("#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>
我有一个项目集合,我希望按某些条件(评分,但也可以是其他任何条件)进行过滤。为此,我有一个 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>
我有一个 "bubble" 显示 当前值 UI 滑块。气泡有 position: absolute;
和 bottom: -27px;
,所以它垂直放置(在 Oy 轴上)。
但是它的left
位置应该是动态,这样气泡就会跟上(左)手柄。
我没能做到。
最简单、最"robust"的方法是什么?
更新:
我已经捕获了句柄的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
?
您可以使用滑块的值来设置相对于元素的 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
);
}
});
由于您在将百分比值转换为像素时遇到问题,我宁愿将 #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>
希望这能解决您的问题。
这是一个仅在使用(移动)手柄时才显示指示器的版本,并进行了一些视觉上的改进。希望对更多开发者有所帮助
$("#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>