Javascript 我可以在引导范围滑块中添加两个值吗

我正在使用引导滑块插件创建一个范围滑块

我想构建一个具有两个值的范围滑块，如下例所示：

我想要达到的结果：

<form>
<div class="d-flex justify-content-between">
   <small><span id="minP">50</span> $</small>
   <small><span id="betP">100</span> $</small>
   <small>2000 $</small>
</div>

<input type="text" id="exampleRange"
    data-slider-min="50"
    data-slider-max="2000"
    data-slider-step="1"
    data-slider-value="[1,100]"
    data-slider-tooltip="hide" />
</form>

var exSlider = new Slider('#exampleRange');
exSlider.on('slide', function(minPValue, betPValue) {
    document.getElementById('minP').textContent = minPValue;
    document.getElementById('betP').textContent = betPValue;
});

HTML:

<form>
<div class="d-flex justify-content-between">
   <small><span id="minP">50</span> $</small>
   <small><span id="betP">100</span> $</small>
   <small>2000 $</small>
</div>

<input type="text" id="exampleRange"
    data-slider-min="50"
    data-slider-max="2000"
    data-slider-step="1"
    data-slider-value="[1,100]"
    data-slider-tooltip="hide" />
</form>

var exSlider = new Slider('#exampleRange');
exSlider.on('slide', function(minPValue, betPValue) {
    document.getElementById('minP').textContent = minPValue;
    document.getElementById('betP').textContent = betPValue;
});

这是我的尝试

const setLabel=（lbl，val）=>{
常量标签=$（`slider-${lbl}-label`）；
标签文本（val）；
常量滑块=$（`sliderdiv.${lbl}-滑块句柄`）；
const rect=滑块[0]。getBoundingClientRect（）；
标签偏移量({
top:rect.top-30，
左：rect.left
});
}
const setLabels=（值）=>{
setLabel（“最小”，值[0]）；
setLabel（“最大”，值[1]）；
}
$（'#ex2'）.slider（）.on（'slide'，函数（ev）{
设置标签（ev.值）；
});
setLabels（$（'#ex2'）.attr（“数据值”）.split（“，”）
#滑块div{
显示器：flex；
弯曲方向：行；
边缘顶部：30px；
}
#滑块div>div{
利润率：8px；
}
.滑块标签{
位置：绝对位置；
背景色：#eee；
填充：4px；
字体大小：0.75rem；
}


这是一个测试

50 DH
2000 DH
请在代码中添加
cdn
。