代码之家 › 专栏 › 技术社区 › Ramesh Diego Lins de Freitas

将内容插入到UI滑块句柄-UI范围滑块

rangeslider jquery-ui css html jquery

Ramesh Diego Lins de Freitas · 技术社区 · 6 年前

到目前为止,我已经尝试了这两种JS和CSS的方式给我没有改变。

#slider-range .ui-slider-handle:first-child:before {
  content: url('./images/min.png');
}

  $('#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>

1 回复 | 直到 6 年前

××× × ×××× 6 年前

仅使用css

pseudo 到 .ui-slider-handle min/max

$(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>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前