在一个滑轨上添加两个滑轨 in react

如何解决在一个滑轨上添加两个滑轨 in react

我使用的是 material-ui 滑块组件。

我想要实现的是有两组不重叠的滑块，以便用户可以选择两个间隔。

目前我能想到的最好方法

1. 放置一个与未选中的栏杆颜色相同的div并放置 在 40 到 70 之间以及每当滑块的值动态变化时 增加该 div 的长度以覆盖点 2 之间的长度 和滑块上的点 3 看起来之间没有轨道 40 和 70

2. 只有两个点（一组滑动轨道）允许用户选择 间隔，然后将其存储并要求他在限制的同时再次选择 他们选择前一个区间的任何部分

我有两件事想知道：

有没有更好的方法让用户选择两个不重叠的间隔。

有没有办法删除 40 到 70 之间的音轨

链接到 material ui sliders