时间戳

首页 > 解决方案 > 使用范围输入更改价格

html - 使用范围输入更改价格

问题描述

我正在创建一个定价表，价格应根据注册用户的数量而变化。测试站点是https://fonexinc.com/price3.html 我的问题是如何根据用户范围输入和他们使用的用户数量来更改价格，这是价格表：https://fonexinc。 com/标准定价结构/

我使用来自 codepen 的输入范围：https ://codepen.io/yavuzselim/pen/qZJQra

价格代码

<div class="price-card--price-text">
                <div class="price-card--price-number toggle-price-content odometer" data-price-monthly="18.71" data-price-yearly="224.52">18.71</div>
            </div>

输入范围代码

            <p> Number of users </p>
        <div class="range">
          <input type="range" id="slider2" min="1" max="5" steps="1" value="1">
        </div>
        <!-- <span id="slider_value"></span> -->
        <ul class="range-labels">
          <li class="active selected">1</li>
          <li>2-20</li>
          <li>21-99</li>
          <li>100-999</li>
          <li>1000+</li>
        </ul>

js

     function togglePriceContent() {
        if ($(toggleSwitch).is(":checked") === true) {
            // if toggle is yearly
            $(".toggle-price-content").each(function() {
                $(this).html($(this).data("price-yearly"));
            });
        } else {
            // if toggle is monthly
            $(".toggle-price-content").each(function() {
                $(this).html($(this).data("price-monthly"));
            });
        }
    }

标签： htmljquerycss

解决方案

这行得通。只需在范围内使用 2-20 进行测试。我假设有 10% 的折扣。

var sheet = document.createElement('style'),
  $rangeInput = $('.range input'),
  prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];

document.body.appendChild(sheet);

var getTrackStyle = function(el) {
  var curVal = el.value,
    val = (curVal - 1) * 24.666666667,
    style = '';

  // Set active label
  $('.range-labels li').removeClass('active selected');

  var curLabel = $('.range-labels').find('li:nth-child(' + curVal + ')');

  curLabel.addClass('active selected');
  curLabel.prevAll().addClass('selected');

  // Change background gradient
  for (var i = 0; i < prefs.length; i++) {
    style += '.range {background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #fff ' + val + '%, #fff 100%)}';
    style += '.range input::-' + prefs[i] + '{background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #b2b2b2 ' + val + '%, #b2b2b2 100%)}';
  }

  return style;
}

$rangeInput.on('input', function() {
  sheet.textContent = getTrackStyle(this);
});

// Change input value on label click
$('.range-labels li').on('click', function() {
  var index = $(this).index();

  $rangeInput.val(index + 1).trigger('input');

});

$(document).ready(function() {
  $("#range").change(function() {
    console.log($(".range-labels li.active").text());
    var user = $(".range-labels li.active").text();
    if (user == "2-20") {
      var second = $('#standard').data('price');
      console.log(second);
      var discount = second - (second * 0.10);
      console.log(discount);
      $('#standard').text(discount.toFixed(2));
    }
  });
});
.range {
     position: relative;
     width: 300px;
     height: 5px;
}
 .range input {
     width: 100%;
     position: absolute;
     top: 2px;
     height: 0;
     -webkit-appearance: none;
}
 .range input::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 14px;
     height: 14px;
     margin: -3px 0 0;
     border-radius: 50%;
     background: #37adbf;
     cursor: pointer;
     border: 0 !important;
}
 .range input::-moz-range-thumb {
     width: 14px;
     height: 14px;
     margin: -3px 0 0;
     border-radius: 50%;
     background: #37adbf;
     cursor: pointer;
     border: 0 !important;
}
 .range input::-ms-thumb {
     width: 14px;
     height: 14px;
     margin: -3px 0 0;
     border-radius: 50%;
     background: #37adbf;
     cursor: pointer;
     border: 0 !important;
}
 .range input::-webkit-slider-runnable-track {
     width: 100%;
     height: 8px;
     cursor: pointer;
     background: #b2b2b2;
     border-radius: 3px;
}
 .range input::-moz-range-track {
     width: 100%;
     height: 8px;
     cursor: pointer;
     background: #b2b2b2;
     border-radius: 3px;
}
 .range input::-ms-track {
     width: 100%;
     height: 8px;
     cursor: pointer;
     background: #b2b2b2;
     border-radius: 3px;
}
 .range input:focus {
     background: none;
     outline: none;
}
 .range input::-ms-track {
     width: 100%;
     cursor: pointer;
     background: transparent;
     border-color: transparent;
     color: transparent;
}
 .range-labels {
     margin: 18px -41px 0;
     padding: 0;
     list-style: none;
}
 .range-labels li {
     position: relative;
     float: left;
     width: 75.25px;
     text-align: center;
     color: #b2b2b2;
     font-size: 14px;
     cursor: pointer;
    /* &::before {
         position: absolute;
         top: -25px;
         right: 0;
         left: 0;
         content: "";
         margin: 0 auto;
         width: 9px;
         height: 9px;
         background: #b2b2b2;
         border-radius: 50%;
    }
    */
}
 .range-labels .active {
     color: #37adbf;
}
 .range-labels .selected::before {
     background: #37adbf;
}
 .range-labels .active.selected::before {
     display: none;
}
 body, html {
     height: 100%;
}
 body {
     background: #f2f2f2;
     display: flex;
     align-items: center;
     justify-content: center;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="range">
    <input id="range" type="range" min="1" max="5" steps="1" value="1">
  </div>

  <ul class="range-labels">
    <li class="active selected">
    1</li>
    <li>2-20</li>
    <li>21-99</li>
    <li>100-999</li>
    <li>1000+</li>
  </ul>
</div>

<div data-price="18.71"id="standard">18.71</div>
<div data-price="30.71" id="premium">30.71</div>
<div data-price="41.21" id="enterprise">41.21</div>

推荐阅读