具有每小时美元价值的 jquery 范围滑块

Posted

技术标签:

【中文标题】具有每小时美元价值的 jquery 范围滑块【英文标题】：jquery range slider with dollar per hour value 【发布时间】：2017-12-11 08:49:29 【问题描述】：

我已使用 Jquery UI Slider 制作范围滑块，并在下图中显示值，请检查此，但我没有在价格之前获得 $ 价值，在价格之后没有获得 /hr 的价值，如在图像中显示

我尝试过使用 jquery UI Slider 它在下面，请给我更好的解决方案，我也找到了 *** 问题，但我没有找到解决方案

 $(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);
                
            );
        );
*: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】：

检查这个更新的 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>

【讨论】：

【参考方案2】：

行改变：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>

【讨论】：

【参考方案3】：

您可以通过::after 元素的content 属性直接添加它们：

content: "$ " attr(data-value) " / Hr";

【讨论】：

以上是关于具有每小时美元价值的 jquery 范围滑块的主要内容，如果未能解决你的问题，请参考以下文章

比特币价值飙升，黑客如何从盗取近8千万美元的比特币中获利？

USDT暴跌之下，Paxos称已发行价值约5000万美元的PAX

具有运行总计的 SQL 分区

swift中的音频播放器没有获得音量和音高的价值

jQuery 金钱计

2022 年欧美上市公司价值/数量暴跌 90%