vue-element实现温度计

首先放上效果图

为了方便使用，直接改造下elementUI的，Slider 滑块

 全部代码，这里可直接使用的插件：

<template>
  <div class="block">
    <div class="unit">10.2℃</div>
    <div>
      <el-slider v-model="value" vertical height="200px" :marks="marks">
      </el-slider>
      <div class="bit"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 60,
      marks: {
        0: "0",
        25: "25",
        50: "50",
        75: "75",
        100: " 100",
      },
    };
  },
};
</script>
<style lang="less" scoped>
.block {
  display: flex;
  align-items: center;
  .unit {
    width: 60px;
    height: 16px;
    font-size: 18px;
    font-family: Adobe Heiti Std;
    font-weight: bold;
    color: #03e9f7;
    margin-right: 26px;
  }
  .bit {
    width: 23px;
    height: 25px;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#3fbbfe),
      to(#a541ff)
    );
    background: linear-gradient(180deg, #3fbbfe, #a541ff);
    border: 1px solid #29458e;
    border-radius: 50%;
    margin: -3px 6px;
  }
}

/deep/.el-slider.is-vertical .el-slider__marks-text {
  left: 37px;
}
/deep/.el-slider__bar {
  background: linear-gradient(180deg, #ff1212, #43b6fe);
}
/deep/.el-slider__runway {
  width: 100%;
  margin: 16px 0;
  background-color: #29458e;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
/deep/.el-slider__marks-text {
  color: #fff;
}
/deep/.el-slider__stop {
  height: 2px;
  width: 17px;
  margin-left: 11px;
  border-radius: 0;
  background-color: #43b6fe;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
/deep/.el-slider__button {
  border: none;
  background-color: transparent;
}
</style>