时间戳

首页 > 解决方案 > 带有不透明范围按钮的输入范围在 Chrome 中不起作用，但在 Firefox 中不起作用

javascript - 带有不透明范围按钮的输入范围在 Chrome 中不起作用，但在 Firefox 中不起作用

问题描述

我有一个样式像标尺的输入范围和样式为不透明圆圈的范围按钮。它在 Firefox 和 Safari 中运行良好，但在 chrome 中却不行。

我感谢任何关于如何使代码在所有浏览器中工作的建议。

这是代码：

obj_sukanya = {
    slidePointPos: function(scope, fval, maxVal, scopeWidth) {
        console.log('scope', scope)
        var figure = fval,
            max = maxVal;
        var h = figure / max * (scopeWidth - scope.next().width()) + 'px';
        scope.next().css({
            left: h
        }).removeClass('hidden');
        scope.next().find('.dynamicVal').html(fval).attr('data-slideval', fval);
        scope.parents('.active').find('.inputbox .amount input').val(fval);   
    },
    bind: function(){
        $(document).on('mousedown', '.pl-amount', function() {
            $('.pl-amount').bind('change mousemove mouseup', function(){
                obj_sukanya.slidePointPos($(this), $(this).val(), 10000000, 696);
            });
        });
    }
    
}

$(document).ready(function(){
    
    obj_sukanya.bind();
        
})
.rangelabel {
    position: relative;
    display: inline-block;
    background: transparent url(https://img.etimg.com/photo/56312378.cms) no-repeat;
    width: 830px;
    margin-bottom: 18px;
}
input[type=range].pl-amount {
    width: 696px;
    height: 120px;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.rangeval{
    position: absolute;
    width: 110px;
    font-size: 17px;
    font-weight: 700;
    top: 50%;
    text-align: center;
    margin-top: -15px;
    margin-left: -52px;
    z-index: 9;
    background-color: #fff;
    margin-left: 73px;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="rangelabel" for="homeLoan1">
  <input max="10000000" min="0" name="points" type="range" class="pl-amount" value="50000" step="50000" id="homeLoan1">
  <span style="left: 123.06px;" class="rangeval"><span data-slideval="2100000" class="dynamicVal">2100000</span></span>
</label>

在此处输入图像描述 在此处输入图像描述

标签： javascripthtmlcss

解决方案

由于您的代码在任何浏览器中都不适用于我，因此我对其进行了一些更改以从您的图像中重现设计。我：

  • 稍微更改了scopeWidth脚本中的内容并调整了输入的大小，以完美地拟合图像并使输入完全不透明
  • 给外部跨度和宽度一样的高度和 50% 的边界半径加上 boxshadow 并使其部分不透明
  • 给外部跨度一个display: inline-flex（加上居中）用于对齐内部跨度
  • 为外部跨度定义，用于在pointer-events: none没有跨度作为障碍的情况下移动输入

通过这些更改，它在任何浏览器（inkl.firefox）中都适用于我......

工作示例：

obj_sukanya = {

  slidePointPos: function(scope, fval, maxVal, scopeWidth) {
    var figure = fval,
      max = maxVal;
    var h = figure / max * (scopeWidth - scope.next().width()) + 'px';
    scope.next().css({
      left: h
    }).removeClass('hidden');
    scope.next().find('.dynamicVal').html(fval).attr('data-slideval', fval);
    scope.parents('.active').find('.inputbox .amount input').val(fval);
  },
  bind: function() {
    $(document).on('mousedown', '.pl-amount', function() {
      $('.pl-amount').bind('change mousemove mouseup', function() {
        obj_sukanya.slidePointPos($(this), $(this).val(), 10000000, 672);
      });
    });
  }

}

$(document).ready(function() {

  obj_sukanya.bind();

})
.rangelabel {
  position: relative;
  display: inline-block;
  width: 830px;
  margin-bottom: 18px;
  background: transparent url(https://img.etimg.com/photo/56312378.cms) no-repeat;
}

input[type=range].pl-amount {
  position: relative;
  top: 0;
  left: 120px;
  width: 580px;
  height: 120px;
  padding: 0;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.rangeval {
  position: absolute;
  top: 20%;
  z-index: 9;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  margin-top: -15px;
  margin-left: 78px;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px #ccc;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  background-color: #fff;
  opacity: 0.7;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="rangelabel" for="homeLoan1">
  <input id="homeLoan1" class="pl-amount" name="points" type="range" max="10000000" min="0" step="50000" value="50000">
  <span class="rangeval" style="left: 123.06px;">
    <span class="dynamicVal" data-slideval="2100000">2100000</span>
  </span>
</label>

推荐阅读