Html firefox上的范围滑块宽度

我正在构建一个自定义视频播放器，我正在使用一个输入类型范围来控制音量，问题是我不能在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>

---

在chrome上正常工作

请提供您的代码，并让我们知道您尝试了什么。添加的代码，宽度：100px在google chromeits上正常工作在Firefox中正常工作我认为这是因为它是一个内联元素，您无法更改其宽度？请提供您的代码，并让我们知道您尝试了什么。添加的代码，width:100px在google chromeits上运行正常在Firefox中运行良好我认为它是因为一个内联元素，您无法更改它的宽度？

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