分享
三行代码  ›  专栏  ›  技术社区  ›  EGxo

Firefox范围滑块在轨迹上方移动拇指

  •  1
  • EGxo  · 技术社区  · 1 周前

    我有一个自定义样式的范围滑块,它在Chrome上运行得很好,但是在Firefox上却不能正常工作。

    我面临的主要问题是在Chrome上我可以设置 margin-top 滑块拇指的值为负值,将其向上移动到轨迹上方,如下图所示: desired design

    然而,在Firefox上,尽管我自定义了滑块拇指,但我无法做到这一点。我用我的代码附加了一个小提琴:

    $( window ).on( "load", function() { 
        sliderValues();    
    });
    
    $( window ).resize(function() {
       sliderValues();  
    });
    
    let mouseDown;
    $(document).mousedown(function() {
        mouseDown = true;
    }).mouseup(function() {
        mouseDown = false;  
    });
    
    
    let stepChangeThreshold = 3000;
    
    
    $('#range').on('mousemove',function(e){
        if (!mouseDown) return;
        
        this.previousClientX = this.previousClientX || e.clientX;
        let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);
        
        
        if (this.value == stepChangeThreshold){
            if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
                this.step = 250;
            } else {
                this.step = 500;
            }
            
            
        }
    
    
        this.previousClientX = e.clientX;
    });
    
    
    $('#range').on('input', function() {    
      sliderValues();   
    
      var val = $('#range').val();  
      if (val >= stepChangeThreshold) {
          this.step = 500;
      } else {
          this.step = 250;
      };
      this.previousVal = val;
        
    });
    
    function sliderValues(){
        var val = $('#range').val();
        var min = $('#range').attr('min');
        var max = $('#range').attr('max');
        var portion = (val - min) / (max - min);
        $('#rangeV').html('<span>$'+ val +'</span>');
        $('#rangeV').css('left', portion * ($('#range').width() - 70));
        
        let thumbSliderRatio = (70/$('#range').width())*100;
        let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";
        
        $('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
    };
    .borrowheading {
        text-align: center;
        font-size: 21px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        padding: 25px;
        margin-top: 50px;
    }
    
    #range {
        -webkit-appearance: none;
        margin: 20px 0;
        width: 100%;
        background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
        border-radius: 8px;
        height: 7px;
        width: 100%;
        outline: none;
        
    }
    #range:focus {
        outline: none;
    }
    
    #range::-webkit-slider-thumb {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: #008e39;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -100px;
    }
    
    #range::-moz-range-thumb {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: #008e39;
        cursor: pointer;
        margin-top: -100px;
        border: none;
    }
    
    .range-wrap{
        width: 90%;
        position: relative;
        margin: auto;
        margin-top: 120px;
    }
    .range-value{
        position: absolute;
    }
    .range-value span{
        width: 70px;
        height: 70px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        line-height: 48px;
        display: block;
        position: absolute;
        pointer-events: none;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        margin-top: -64px;
    }
    
    .range-value span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 36px;
        border: 2px solid #008e39;
        top: 55px;
        left: calc(50% - 1px);
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <h4 class="borrowheading">How much would you like to borrow today?</h4>
    <div class="range-wrap">
        <div class="range-value" id="rangeV"></div>
        <input id="range" type="range" min="500" max="5000" step="250" value="1000">
    </div>

    在Firefox上如何将滑块拇指提高100像素?

    1 回复  |  直到 1 周前
        1
  •  1
  •   Andy Hoffman    1 周前

    您可以使用 transform ,并将范围元素向负y轴平移。另外,我给了 span 包含价格a z-index: 1 并降低了伪元素的高度,该元素表示可拖动范围元素和滑块本身之间的连接杆。

    $( window ).on( "load", function() { 
        sliderValues();    
    });
    
    $( window ).resize(function() {
       sliderValues();  
    });
    
    let mouseDown;
    $(document).mousedown(function() {
        mouseDown = true;
    }).mouseup(function() {
        mouseDown = false;  
    });
    
    
    let stepChangeThreshold = 3000;
    
    
    $('#range').on('mousemove',function(e){
        if (!mouseDown) return;
        
        this.previousClientX = this.previousClientX || e.clientX;
        let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);
        
        
        if (this.value == stepChangeThreshold){
            if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
                this.step = 250;
            } else {
                this.step = 500;
            }
            
            
        }
    
    
        this.previousClientX = e.clientX;
    });
    
    
    $('#range').on('input', function() {    
      sliderValues();   
    
      var val = $('#range').val();  
      if (val >= stepChangeThreshold) {
          this.step = 500;
      } else {
          this.step = 250;
      };
      this.previousVal = val;
        
    });
    
    function sliderValues(){
        var val = $('#range').val();
        var min = $('#range').attr('min');
        var max = $('#range').attr('max');
        var portion = (val - min) / (max - min);
        $('#rangeV').html('<span>$'+ val +'</span>');
        $('#rangeV').css('left', portion * ($('#range').width() - 70));
        
        let thumbSliderRatio = (70/$('#range').width())*100;
        let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";
        
        $('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');     
    };
    .borrowheading {
        text-align: center;
        font-size: 21px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 800;
        padding: 25px;
        margin-top: 50px;
    }
    
    #range {
        -webkit-appearance: none;
        margin: 20px 0;
        width: 100%;
        background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
        border-radius: 8px;
        height: 7px;
        width: 100%;
        outline: none;
        
    }
    #range:focus {
        outline: none;
    }
    
    #range::-webkit-slider-thumb {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: #008e39;
        cursor: pointer;
        -webkit-appearance: none;
        transform: translateY(-65px);    
    }
    
    #range::-moz-range-thumb {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: #008e39;
        cursor: pointer;
        border: none;
        transform: translateY(-65px);  
    }
    
    .range-wrap{
        width: 90%;
        position: relative;
        margin: auto;
        margin-top: 120px;
    }
    .range-value{
        position: absolute;
    }
    .range-value span{
        width: 70px;
        height: 70px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        line-height: 48px;
        display: block;
        position: absolute;
        pointer-events: none;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        margin-top: -64px;
        z-index: 1;
    }
    
    .range-value span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 32px;
        border: 2px solid #008e39;
        top: 55px;
        left: calc(50% - 1px);
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <h4 class="borrowheading">How much would you like to borrow today?</h4>
    <div class="range-wrap">
        <div class="range-value" id="rangeV"></div>
        <input id="range" type="range" min="500" max="5000" step="250" value="1000">
    </div>

    enter image description here