Jquery ui 添加辅助元素以显示用户在JQuery UI中将滑块拖动到的位置

在以下代码中使用JQuery UI slider的正常实现：

$(function() {
  $('.slider').slider();
});

---

jQueryUI只创建周围的可滑动区域，然后创建要拖动的控制柄。是否有人有过扩展此功能的经验，可以添加一个显示用户拖动到的位置的辅助元素？我想要实现的是在手柄的任一侧都有一个双色的可拖动区域。

您可以在滑块中添加div，并在幻灯片上更新其大小。像这样：

$（'.slider'）.slider({
最高：100，
分:0,，
幻灯片：功能（e、ui）{
$（'.left side'）.css（'width'，$（ui.handle.position（）.left）
$（'.right side'）.css（'width'，$（e.target）.width（）-$（ui.handle.position（）.left）
}
});
$（'.left side'）.css（'width'，'0px'）；
$（'.right side'）.css（'width'，$（'.slider'）.width（））

.slider div{
位置：相对位置；
身高：100%；
}
.左侧{
背景色：aliceblue；
左：0px；
宽度：200px；
浮动：左；
}
.右侧{
背景色：深蓝色；
宽度：200px；
浮动：左；
}

---

这是我在这里得到的最全面的答案！谢谢