ElementUI Slider 滑块样式重写

 业务场景需要，重写一下Slider的样式，不喜勿喷！

<template>
  <div class="cc">
    <br />
    <br />
    <br />
    <br />
    <el-slider
      v-model="value"
      :show-tooltip="false"
      :marks="marks">
    </el-slider>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      value: 0,
      marks: {
        0: '0',
        10: '',
        20: '20',
        30: '',
        40: '40',
        50: '',
        60: '60',
        70: '',
        80: '80',
        90: '',
        100: '100',
        /*50: {
          style: {
            color: '#1989FA'
          },
          },
          label: this.$createElement('strong', '50%')
        }*/
      }
    }
  },
  created() {
  },
  methods: {

  },
}
</script>
<style>
.cc{
  margin:0 auto;
  width:500px;
}
.cc .el-slider__stop{
  height: 9px;
  margin-top: -8px;
  width:2px;
  border-radius: 0;
  background-color:#E4E7ED;
}
.cc .el-slider__marks-text{
  margin-top: -30px;
}
.cc .el-slider__button{
  color:red;
  width: 14px;
  height: 14px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background-color:#409EFF;
  border:1px solid #409EFF;
  transform: rotate(-46deg);
}
.cc .el-slider__button.hover, .el-slider__button:hover{
  transform: rotate(-46deg);
  width: 18px;
  height: 18px;
}
</style>

效果图如下：

具体的拖拽事件，请参考官方地址： Element - The world's most popular Vue UI framework