将内容插入 UI 滑块句柄 - UI 范围滑块
Insert content to UI slider handle - UI Range Slider
我使用 UI 库创建了一个范围滑块。默认情况下它有它的滑块处理程序。此滑块处理程序来自 jQuery。您可以检查代码段并理解它。现在我想要的是,我想在幻灯片处理程序中放置一些文本,例如
到目前为止,我已经在 JS 和 CSS 两种方式中尝试过,但没有任何改变。
CSS 方式(将文本创建为 PNG 并推入伪元素)
#slider-range .ui-slider-handle:first-child:before {
content: url('./images/min.png');
}
和JS方式(在JS中使用了内部HTML,也在jQuery中尝试了html())。
$('#slider-range .ui-slider-handle:first-child').html('<p>MIN<br><></p>');
$('#slider-range .ui-slider-handle:last-child').html('<p>MAX<br><></p>');
我已经阅读了 UI 文档,但找不到任何有用的属性来实现此目的。这是我的片段。
$(function() {
$("#slider-range").slider({
range: true,
min: 4500,
max: 8000,
values: [5000, 7500],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
.wrapper{
padding:60px;
}
#slider-range>div {
background: #ff6c00;
}
#slider-range .ui-state-default {
background: #ffcc00;
height: 50px;
width: 50px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 7px;
box-shadow: 0px 3px 5px 0px rgba(1, 1, 1, 0.23);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<div id="slider-range"></div>
</div>
只有css
您可以使用 pseudo
到内容 min/max
的 .ui-slider-handle
$(function() {
$("#slider-range").slider({
range: true,
min: 4500,
max: 8000,
values: [5000, 7500],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
.wrapper{
padding:60px;
}
#slider-range>div {
background: #ff6c00;
}
#slider-range .ui-state-default {
background: #ffcc00;
height: 50px;
width: 50px;
top: 50%;
transform: translateY(-50%);
border-radius: 7px;
box-shadow: 0px 3px 5px 0px rgba(1, 1, 1, 0.23);
}
.ui-slider-handle:after{
content:"<>";
font-size:20px;
padding-left: 8px;
position: absolute;
top: 21px;
right: 15px;
}
.ui-slider-handle:before{
content:"min";
font-size:20px;
padding-left: 8px;
}
.ui-slider-handle:last-child:before{
content:"max";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<div id="slider-range"></div>
</div>
我使用 UI 库创建了一个范围滑块。默认情况下它有它的滑块处理程序。此滑块处理程序来自 jQuery。您可以检查代码段并理解它。现在我想要的是,我想在幻灯片处理程序中放置一些文本,例如
到目前为止,我已经在 JS 和 CSS 两种方式中尝试过,但没有任何改变。
CSS 方式(将文本创建为 PNG 并推入伪元素)
#slider-range .ui-slider-handle:first-child:before {
content: url('./images/min.png');
}
和JS方式(在JS中使用了内部HTML,也在jQuery中尝试了html())。
$('#slider-range .ui-slider-handle:first-child').html('<p>MIN<br><></p>');
$('#slider-range .ui-slider-handle:last-child').html('<p>MAX<br><></p>');
我已经阅读了 UI 文档,但找不到任何有用的属性来实现此目的。这是我的片段。
$(function() {
$("#slider-range").slider({
range: true,
min: 4500,
max: 8000,
values: [5000, 7500],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
.wrapper{
padding:60px;
}
#slider-range>div {
background: #ff6c00;
}
#slider-range .ui-state-default {
background: #ffcc00;
height: 50px;
width: 50px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 7px;
box-shadow: 0px 3px 5px 0px rgba(1, 1, 1, 0.23);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<div id="slider-range"></div>
</div>
只有css
您可以使用 pseudo
到内容 min/max
.ui-slider-handle
$(function() {
$("#slider-range").slider({
range: true,
min: 4500,
max: 8000,
values: [5000, 7500],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
.wrapper{
padding:60px;
}
#slider-range>div {
background: #ff6c00;
}
#slider-range .ui-state-default {
background: #ffcc00;
height: 50px;
width: 50px;
top: 50%;
transform: translateY(-50%);
border-radius: 7px;
box-shadow: 0px 3px 5px 0px rgba(1, 1, 1, 0.23);
}
.ui-slider-handle:after{
content:"<>";
font-size:20px;
padding-left: 8px;
position: absolute;
top: 21px;
right: 15px;
}
.ui-slider-handle:before{
content:"min";
font-size:20px;
padding-left: 8px;
}
.ui-slider-handle:last-child:before{
content:"max";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<div id="slider-range"></div>
</div>