小DEMO：在vue中自定义range组件

1、组件样式

2、使用

import cSlider from '@/components/c-slider/c-slider.vue'
 
<div class="range">
	<cSlider v-model="cScale" @change="cScaleChange" :min="1" :max="10"/>
div>

3、组件代码

<template>
  <div 
    class="slider-box" 
    data-id="1"
    ref="sliderBox" 
    @mousedown.stop.prevent="onMousedown($event)"
    @mouseup.stop.prevent="onMouseup"
    @mouseleave.stop.prevent="onMouseup"
    @mousemove.stop.prevent="onMousemove($event)"
    >
    <div class="slider-wrap">
      <div 
        class="slider-bar"
        data-id="1"
        :style="{
          width: ((modelValue - min)*stepWidth)+'px'
        }">
        <span
          class="slider-btn"
          :class="{
            active: sliderActive
          }"
          data-id="1"
          @mousedown.stop.prevent="onMousedown($event, true)"
          :style="{
            left: ((modelValue - min)*stepWidth)+'px'
          }">
          <b>{{ modelValue }}b>
        span>
 
      div>
    div>
    
  div>
template>
 
<script>
 
export default {
 
  model: {
    prop: 'modelValue',
    event: 'change'
  },
 
  props: {
		modelValue: {
      type: Number,
      default: 0
    },
 
    min: {
      type: Number,
      default: 0
    },
 
    max: {
      type: Number,
      default: 10
    },
 
    step: {
      type: Number,
      default: 1
    }
	},
 
  data() {
    return {
      rangeValue: 0,
      stepWidth: 0,
      sliderBox: null,
      moveAbled: false,
      mousePoint: null,
      sliderActive: false
    }
  },
 
  mounted() {
    // document.addEventListener('mouseup', this.onMouseup)
    // document.addEventListener('mouseleave', this.onMouseup)
    
    // this.$nextTick(() => {
 
      let _sliderBox = this.$refs['sliderBox'].getBoundingClientRect()
      
      this.sliderBox = {
        width: _sliderBox.width,
        height: _sliderBox.height,
        top: _sliderBox.top + document.documentElement.scrollTop,
        left: _sliderBox.left + document.documentElement.scrollLeft
      }
      this.stepWidth = this.sliderBox.width/(this.max-this.min)
      // console.log('xxx', _sliderBox, this.sliderBox)
    // })
  },
 
  beforeMount() {
    // document.removeEventListener('mouseup', this.onMouseup)
    // document.removeEventListener('mouseleave', this.onMouseup)
  },
 
  methods: {
 
    onMousemove(e) {
      if(this.moveAbled) {
        this.sliderActive = true
        
        let d = e.pageX - this.mousePoint.pageX
 
        let _val = Math.round(this.modelValue + d/this.stepWidth)
 
        if(_val < this.min) {
          _val = this.min
        } else if(_val > this.max) {
          _val = this.max
        }
 
        if(_val !== this.modelValue) {
          this.mousePoint = e
        }
        
        this.$emit('update:modelValue', _val)
        this.$emit('change')
 
        console.log('onMousemove', _val)
      }
    },
 
    onMouseup() {
      // console.log('onMouseup')
      this.moveAbled = false
      this.sliderActive = false
    },
 
    onMousedown(e, moveAbled) {
      console.log('onMousedown', this.stepWidth)
 
      if(moveAbled) {
        this.moveAbled = moveAbled
        this.mousePoint = e
      } else {
        let d = e.pageX - this.sliderBox.left
 
        let _val = Math.round(this.min + d/this.stepWidth)
 
        if(_val < this.min) {
          _val = this.min
        } else if(_val > this.max) {
          _val = this.max
        }
        
        this.$emit('update:modelValue', _val)
        this.$emit('change')
        
      }
    },
 
  }
}
 
script>
 
<style lang="scss" scoped>
  .slider-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .range {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      opacity: 0.3;
    }
    .slider-wrap {
      position: relative;
      width: 100%;
      height: 3px;
      border-radius: 2px;
      background: #D9D9D9;
      cursor: pointer;
      .slider-bar {
      border-radius: 2px;
      height: 100%;
      background: #0256FF;
      
      .slider-btn {
        cursor: grab;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 100%;
        box-shadow: 0 0 2px 2px #D6D6D6;
        &:hover, &.active {
          width: 15px;
          height: 15px;
          b {
            display: block;
          }
        }
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          content: '';
          width: 4px;
          height: 4px;
          background: #0256FF;
          border-radius: 100%;
        }
        b {
          display: none;
          position: absolute;
          top: -10px;
          left: 50%;
          background: rgba(0, 0, 0, 0.3);
          color: white;
          font-size: 12px;
          padding: 0 5px;
          border-radius: 5px;
          transform: translate(-50%, -100%);
          &::after {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, 100%);
            content: '';
            width: 0;
            height: 0;
            border-top: 4px solid rgba(0, 0, 0, 0.3);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-right: 4px solid transparent;
            
          }
        }
      }
    }
    }
    
  }
style>