Firefox上的范围滑块宽度

Question

我正在构建一个自定义视频播放器并且我使用输入类型范围进行音量控制，问题是我无法在firefox上使宽度低于300像素，任何建议？

标记：

<div id="controls">
   <div id="progressBar"><span id="progress"></span></div>
       <button onclick="togglePlayPause()" id="playpause" title="play"><i class="fa fa-2x fa-play"></i></button>
        <div id="volume-controls">
           <button id="mute" onclick="toggleMute()"><i class="fa fa-2x fa-volume-up"></i></button>
           <input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />  
        </div>       
   </div>                         
</div>

我的css：

input[type="range"] {
   -webkit-appearance: none;
   border: 1px solid white;
   margin-top: 8px;
   width: 100px;
}

在Chrome上正常使用