el-slider实现滚动条自定义分段颜色

<template>
  <el-slider
    ref="sliderRef"
    class="!w-80%"
    style="--el-slider-runway-bg-color: red; --el-slider-main-bg-color: green"
    v-model="speedRange"
    range
    :min="0"
    :step="0.1"
    :max="50"
    size="small"
  />
</template>

<script setup lang="ts">
const sliderRef = ref();
const speedRange = ref([0, 50]);
onMounted(() => {
  nextTick(addSliderBarToSlider);
});
/** 增加SliderBar,并增加Style监听 */
const addSliderBarToSlider = () => {
  const newsliderBar = document.createElement('div');
  newsliderBar.className = 'el-slider__bar';
  newsliderBar.style.backgroundColor = 'blue';
  newsliderBar.style.right = '0%';
  let sliderBar = sliderRef.value.$el.firstElementChild.firstElementChild;
  sliderRef.value.$el.firstElementChild.appendChild(newsliderBar);
  // 创建一个MutationObserver实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes') {
        newsliderBar.style.width = `calc(100% - ${sliderBar.style.width} - ${sliderBar.style.left})`;
      }
    });
  });
  // 配置MutationObserver以监听属性变化
  observer.observe(sliderBar, {
    attributes: true,
    attributeFilter: ['style'],
  });
};
</script>

<style lang="scss" scoped>
.el-slider {
  --el-slider-border-radius: 2px;
  --el-slider-height: 4px;
  --el-slider-button-size: 14px;
}
</style>