jquery范围滑块，每小时美元价值

时间：2017-12-11 08:49:29

标签： jquery css jquery-ui uislider

我已经使用Jquery UI Slider来制作范围滑块，在下面的图像中显示值，但是我没有在价格之前得到$ value和价格之后的/ hr像图像中的显示

Check this
我尝试使用jquery UI Slider它在下面，请给我更好的解决方案我想要的，我也找到stackoverflow问题，但我没有找到解决方案

＆＃13;
＆＃13; 
 $(document).ready(function () {
            var initialValues = [540, 1020],
            updateValue = function (ui) {
                var price = ui.value;
                $(ui.handle).attr('data-value', price);
            };

            $(".slider-range").slider({
                min: 0,
                max: 1440,
                step: 15,
                range: true,
                values: [540, 1020],
                create: function (event, ui) {
                    $.each(initialValues, function (i, v) {
                        updateValue({
                            value: v,
                            handle: $('.ui-slider-handle').eq(i)
                        });
                    });
                },
                slide: function (event, ui) {
                    updateValue(ui);
                }
            });
        });
＆＃13; 
*:focus{
outline:0;}
.time-range
{
  padding:0 20px;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;}

.ui-slider {
  position: relative;
  text-align: left;}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;}

.ui-slider .ui-slider-handle {
  background-color:#424453;
  width: 18px;
  height: 18px;}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background:#ff0000 50% 50% no-repeat;}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.7em;}

.ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: -24px;
    left: -20px;
    min-width: 60px;
    font-size:10px;
    height: 20px;
    color: #333;
    padding: 1px;
    text-align: center;}  

.ui-slider a:focus {
  outline:none;}

#slider-range {
  width: 95%;
  margin: 0px;}

.time-range {
  width: 100%;
  margin:10px 0px;
  display:block;}
  
.time-slider-label {
  display:inline-block;}  

.sliders_step1{
  width: auto;}

#time-range label{
    margin-top:10px;}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<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="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

检查此更新的JQuery 

 $(document).ready(function () {
            var initialValues = [540, 1020],
            updateValue = function (ui) {
                var price = ui.value;

                $(ui.handle).attr('data-value', '$' + price + '/hr');
            };

            $(".slider-range").slider({
                min: 0,
                max: 1440,
                step: 15,
                range: true,
                values: [540, 1020],
                create: function (event, ui) {
                    $.each(initialValues, function (i, v) {
                        updateValue({
                            value: v,
                            handle: $('.ui-slider-handle').eq(i)
                        });
                    });
                },
                slide: function (event, ui) {
                    updateValue(ui);
                }
            });
        });
*:focus{
outline:0;}
.time-range
{
  padding:0 20px;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;}

.ui-slider {
  position: relative;
  text-align: left;}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;}

.ui-slider .ui-slider-handle {
  background-color:#424453;
  width: 18px;
  height: 18px;}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background:#ff0000 50% 50% no-repeat;}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.7em;}

.ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: -24px;
    left: -20px;
    min-width: 60px;
    font-size:10px;
    height: 20px;
    color: #333;
    padding: 1px;
    text-align: center;}  

.ui-slider a:focus {
  outline:none;}

#slider-range {
  width: 95%;
  margin: 0px;}

.time-range {
  width: 100%;
  margin:10px 0px;
  display:block;}
  
.time-slider-label {
  display:inline-block;}  

.sliders_step1{
  width: auto;}

#time-range label{
    margin-top:10px;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<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="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>

答案 1 :(得分：1)

行已更改：var price =“$”+ ui.value +“/ Hr”; 

$(document).ready(function () {
            var initialValues = [540, 1020],
            updateValue = function (ui) {
                var price = "$ " + ui.value + "/ Hr";
                $(ui.handle).attr('data-value', price);
            };

            $(".slider-range").slider({
                min: 0,
                max: 1440,
                step: 15,
                range: true,
                values: [540, 1020],
                create: function (event, ui) {
                    $.each(initialValues, function (i, v) {
                        updateValue({
                            value: v,
                            handle: $('.ui-slider-handle').eq(i)
                        });
                    });
                },
                slide: function (event, ui) {
                    updateValue(ui);
                }
            });
        });
*:focus{
outline:0;}
.time-range
{
  padding:0 20px;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;}

.ui-slider {
  position: relative;
  text-align: left;}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;}

.ui-slider .ui-slider-handle {
  background-color:#424453;
  width: 18px;
  height: 18px;}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background:#ff0000 50% 50% no-repeat;}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.7em;}

.ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: -24px;
    left: -20px;
    min-width: 60px;
    font-size:10px;
    height: 20px;
    color: #333;
    padding: 1px;
    text-align: center;}  

.ui-slider a:focus {
  outline:none;}

#slider-range {
  width: 95%;
  margin: 0px;}

.time-range {
  width: 100%;
  margin:10px 0px;
  display:block;}
  
.time-slider-label {
  display:inline-block;}  

.sliders_step1{
  width: auto;}

#time-range label{
    margin-top:10px;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<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="time-range">
  <div class="sliders_step1">
  
    <div class="slider-range">
    </div>
  </div>
</div>

答案 2 :(得分：0)

您可以直接通过content元素的::after属性添加这些内容：

content: "$ " attr(data-value) " / Hr";
相关问题
最新问题