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

Question

我已经使用 Jquery UI 滑块来制作范围滑块，在下面的图像中显示值检查这个但是我没有在价格之前和/小时之后获得 $ 值，就像在图像中显示的那样

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

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

Answer 1

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

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

Answer 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>

Answer 3

检查此更新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>

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

jquery range slider with dollar per hour value

jquery

css

jquery-ui

uislider