HTML范围样式化firefox。让拇指在边缘上方居中

我正在尝试设计一个输入[type=range]，并且已经完成了我在chrome和safari上的尝试，但是我在努力实现我想要的Firefox。在Chrome/Safari中，我可以使用：：before伪选择器创建泪滴形状的拇指来拖动滑块，但是：：before选择器在firefox中对输入元素不起作用。因此，我必须设计拇指本身的样式

拇指看起来应该是这样的，但当你把它一直滑到左边或右边时，眼泪滴的边缘就停止了。我需要它在滑块的每一侧移动15px，这样它就是指示滑块上当前位置的“尖头”部分

我尝试了几乎所有与定位有关的东西，现在利润率没有成功。这里有人有什么建议吗？下面是一个JSFIDLE：

以下是我用来设计拇指样式的CSS代码：

.ep-calc-tools-section .ep-calc-tool input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: #3D3F44;
    border-radius: 0 50% 50% 50%;
    border: 3px solid #3D3F44;
    display: block;
    transform: translateY(-30px) rotate(224deg);
}

---

我也在试图找出“正确”的答案。可以做的一件事是将拇指的宽度和高度设置为0，使其看起来非常小，然后将scale（）添加到变换规则中以设置其大小

/* All the same stuff for Firefox */
.ep-calc-tools-section .ep-calc-tool input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    width:0;
    height:0;
    background: #3D3F44;
    border-radius: 0 50% 50% 50%;
    border: 3px solid #3D3F44;
    display: block;
    transform: translateY(-30px) rotate(224deg) scale(6);
}

谢谢你，丹尼。不管这是不是“正确”的方法，它都起作用了。我有一种感觉，目前大多数设计拇指或滑块的解决方案都非常粗糙，因为所有浏览器对它的处理方式都不同，并且您必须对几乎所有浏览器应用自定义规则。