Question

是否有可能在Firefox上获得与::-ms-fill-lower相同的效果？不使用JS？

我已经找到了一种解决方法，以便在基于webkit的浏览器（例如Google Chrome）上实现这种效果，该浏览器使用伪元素：before和：after。但它不会对Firefox元素起作用。好像::-moz-range-thumb::before和::-moz-range-thumb::after对Firefox不合法，而Google Chrome支持::-webkit-slider-thumb::before和::-webkit-slider-thumb::after

这里是Firefox版本基本大纲的缩写：

＆＃13;

input[type="range"].slider-track {
  border: none;
  margin: 10px 0;
  width: 100%;
  height: 30px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
  background: transparent;
}

input[type="range"].slider-track::-moz-range-thumb {
    box-shadow: none;
    border: 2px solid grey;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    background: white;
}

input[type="range"].slider-track::-moz-range-track {
    width: 100%;
    height: 2px;
    box-shadow: none;
    background: blue;
    border-radius: 0px;
    border: 0px;
}

＆＃13;

<div style="max-width: 380px;">
    <input type="range" class="slider-track" id="mySlider1"></input>
</div>

＆＃13;

Answer 1

抱歉！在发布此消息后20分钟我找到了答案......我整天都在寻找这个答案...... 这是答案：

使用::-moz-range-progress元素！

示例（适用于代码段）

input[type="range"].slider-track::-moz-range-progress {
      background: red;
}

Answer 2

你可以试试这个：

＆＃13;

$('input[type="range"]').change(function () {
    var val = $(this).val()/100;
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #94A14E), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
});

＆＃13;

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    height: 6px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #94A14E),
        color-stop(0.15, #C5C5C5)
    );
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 15px;
    width: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="100" step="1" value="15">

＆＃13;

Answer 3

使用输入更改而不是更改，因此在所有浏览器中，颜色应在用户拖动时填充，而不是在用户停止拖动时填充

$(document).on('input change', '#slider', function() {
    // codes
});

Answer 4

在这里，您使用的是Vanilla JS-对Chrome范围输入使用渐变：

    <div class="chrome">
  <input id="myinput" type="range" value="50" />
</div>

        #myinput {background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
      border: solid 1px #82CFD0;
      border-radius: 8px;
      height: 7px;
      width: 356px;
      outline: none;
      transition: background 450ms ease-in;
      -webkit-appearance: none;
    }



     document.getElementById("myinput").oninput = function() {
      this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 '+this.value +'%, #fff ' + this.value + '%, white 100%)'
    };

https://codepen.io/saintwycliffe/pen/VBGYXN

如何用CSS只填写拇指左侧的HTML5输入[type = range]？

4 个答案: