Element中利用el-slider制作字体大小设置滑块

 html 

 <div>字体大小设置</div>
      <div style="margin-top: 12px">
        <div> <span style="margin-right: 122px">小</span><span style="margin-right: 122px">中</span><span style="margin-right: 122px">大</span><span>特大</span>
        </div>
        <div class="slider-style">
          <el-slider
            v-model="value"
            :show-tooltip="false"
            :marks="marks">
          </el-slider>
        </div>
      </div>

 js

const value = ref(0)
const marks = ref({
  0: '',
  33: '',
  66: '',
  100: '',
})

css

<style>
.slider-style{
  width:420px;
  height: 1px;
  margin-left: 8px;
  margin-top: 3px;
}
.slider-style .el-slider__runway{
  height: 1px!important;
}
.slider-style .el-slider__bar{
  height: 1px!important;
  background-color:#E6E6E6;
}
.slider-style .el-slider__stop{
  height: 6px;
  margin-top: -6px;
  width:2px;
  border-radius: 0;
  background-color:#E4E7ED;
}
.slider-style .el-slider__marks-text{
  margin-top: 0;
}
.slider-style .el-slider__button{
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color:#fff;
  border:3px solid #0F64FF;
  transform: rotate(-46deg);
}
.slider-style .el-slider__button.hover, .el-slider__button:hover{
  transform: rotate(-46deg);
  width: 20px;
  height: 20px;
}
</style>