Jquery 设置值标签的格式，使其适合而不被切断

我遇到了一个问题，我正在自动格式化我的实例，但它被错误地切断了。结果是这样的：

等等

此滑块只是在范围内向上移动（最大值约为10000000美元，可能更多），因此您可以理解，显示值的较大部分将随着其增长而被截断，这不是我想要的

我设法通过重载

draw

方法来对抗这种情况，应用了以下方法，但随着字体大小的增加，这并不是一种完全可以证明的方法：

$(this.i).css('font-size', '90%').val('$' + parseFloat(this.cv, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

但是，我想要一个更干净的方法，而不必将我自己的CSS应用于显示的标签。

我确实尝试了以下

格式

，但它超载了：

format: function (value) {
    return '$' + parseFloat(value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
},

---

如果与此有关，我正在使用引导，此容器的HTML如下所示：

---

如果您决定使用此解决方案，下面是我动态更改字体的示例：尝试将值从

xxxxx.xx

更改为

xxxxxx.xx

，您会注意到字体减少本身。从这里，您可以根据必须使用基本数学显示的位数来决定字体值

下面是代码本身。我保留了重载的

格式

函数，并添加了

更改

函数：

jQuery（'.dial'）。旋钮({
格式：函数（e）{
返回“$”+parseFloat（e，10）.toFixed（2）.替换（/（\d）（？=（\d{3}）+\）/g，“$1”）
},
更改：功能（五）{
var v=parseInt（v）；
var VALENGTH=字符串（v）.长度；
var defaultFontSize=22；
如果（长度>5）{
var defaultFontSize=22-（（valLength-5）*4）；
这个({
字体：“粗体”+defaultFontSize+“px Arial”
});
}否则{
这个({
字体：“粗体”+defaultFontSize+“px Arial”
});
}
}
});如果您决定使用此解决方案，下面是我动态更改字体的示例：尝试将值从
xxxxx.xx
更改为
xxxxxx.xx
，您会注意到字体会自动减少。从这里，您可以根据必须使用基本数学显示的位数来决定字体值

下面是代码本身。我保留了重载的
格式
函数，并添加了
更改
函数：


jQuery（'.dial'）。旋钮({
格式：函数（e）{
返回“$”+parseFloat（e，10）.toFixed（2）.替换（/（\d）（？=（\d{3}）+\）/g，“$1”）
},
更改：功能（五）{
var v=parseInt（v）；
var VALENGTH=字符串（v）.长度；
var defaultFontSize=22；
如果（长度>5）{
var defaultFontSize=22-（（valLength-5）*4）；
这个({
字体：“粗体”+defaultFontSize+“px Arial”
});
}否则{
这个({
字体：“粗体”+defaultFontSize+“px Arial”
});
}
}
});你的“旋钮”过载有问题吗？@adeneo我的“旋钮”今天不在踢球！（ps，谢谢，你让我开心了！）你需要根据文本大小自动调整文本吗？（没有您自己的格式）我建议根据显示的位数动态减少字体，或者切换到（$100k）格式以适应里面的所有内容。您的“旋钮”过载有问题吗？@adeneo我的“旋钮”今天不在玩球！（ps，谢谢，你让我开心了！）你需要根据文本大小自动调整文本吗？（没有您自己的格式）我建议根据显示的位数动态减少字体，或者切换到（$100k）格式以适应里面的所有内容。
<div class='row margin-top-45'>
    <div class='col-lg-4'>
        <input value="50000" class="dial" data-step="5000" data-min="0" data-max="10000000" data-thickness="0.2" data-fgColor="#16A085" data-skin="tron">
    </div>
</div>