Homemade simple Range (Vue)

Homemade simple Range (Vue)

Without further ado, let’s start with the results

Implementation approach

The main interface and logic two blocks

The interface is divided into five parts

• Left slider length
• Left content position
• The middle length
• Right slider length
• Right content position

logic

• Touch3 event
• The length and position of each slide block are calculated
• Color change when selected

Concrete implementation steps

1. First of all, we know that the length of the entire container is the same as the left side plus the middle side plus the right side so we can save it by taking the width of the total container and using a variable, and I’m using the width of the screen.

this.rangeWidth = document.body.clientWidth

Copy the code

2. Add vue’s three touch events

 @touchstart.stop.prevent="leftTextTouchStart" / / press

 @touchmove.stop.prevent="leftTextTouchMove" / / sliding

 @touchend.stop.prevent="leftTextTouchEnd"  / / to loosen



// right slider, same as above

 @touchstart.stop.prevent="rightTextTouchStart"

 @touchmove.stop.prevent="rightTextTouchMove"

 @touchend.stop.prevent="rightTextTouchEnd"

Copy the code

3. Using class binding, change the style of the clicked slider in the manner triggered by the touchStart event, and fire the Touchend event when released, restoring the original style

// Slide the event method

 leftTextTouchStart() {

     this.leftClick = true;

 },

 leftTextTouchEnd() {

     this.leftClick = false;

 },

// Class style binding

:class="{check_text_div:leftClick}"

Copy the code

4. Calculation of the width and position of the three core blocks in sliding. Since the coordinate axes are changing in real time in sliding, we use the calculation attribute of VUE for operation here

rangeWidth // The width of the entire container

leftWidth // The left slide distance is defined by the slide event

rightWidth // The right slide distance is defined by the slide event

width() {

    return Math.min(Math.max(0.this.rangeWidth - this.leftWidth - this.rightWidth), this.rangeWidth)// The content width should be equal to the total width minus the left and right sides, and be greater than or equal to 0 and less than or equal to the total width

},

left() {

    return Math.max(this.leftWidth, 0)// Prevent the left slide out of the interface

},

right() {

    if (this.left + this.rightWidth <= this.rangeWidth) return Math.max(this.rightWidth - 0.5.0)// Prevent right sliding out of the interface

},

Copy the code

5. In the sliding event, the interface changes and the sliding distance between the left and right sides are recorded

leftTextTouchMove(e) {

    let touch = e.changedTouches[0];

    let clientX = touch.clientX;// Get the abscissa value of the slide event

    if (clientX >= 0) {// Only check the slider when the coordinate value is in the screen

        if (this.left + this.right <= this.rangeWidth) {// Prevent the left and right sliders from being inverted

            this.leftWidth = clientX;// The left slider distance is equal to the x coordinate

            // Interface operation

            $('#nowRange').css({'left': this.left, 'width': this.width});

            $('#leftText').css({'left': this.left});

            $('#leftImg').css({'left': this.left});

       }

    }

},

rightTextTouchMove(e) {

    let touch = e.changedTouches[0];

    let clientX = touch.clientX;// Get the abscissa value of the slide event

    if (clientX <= this.rangeWidth) {// Only check the slider when the coordinate value is in the screen

        this.rightWidth = this.rangeWidth - clientX;// The right slider distance is equal to the total length minus the slide abscissa

        if (this.left + this.right <= this.rangeWidth) {// Prevent the left and right sliders from being inverted

            // Interface changes

            $('#nowRange').css({'width': this.width});

            $('#rightText').css({'right': this.right});

            $('#rightImg').css({'right': this.right});

        }

    }

},

Copy the code

6. Text content can be implemented by calculating values

leftText() {

    let num = parseInt(this.left / this.rangeWidth * 100);

    if (num === 0 || isNaN(num)) return '不限';

    return num + 'k';

},

rightText() {

    if (this.rangeWidth === 0) return '不限';

    let num = parseInt((this.rangeWidth - this.right) / this.rangeWidth * 100);

    if (num >= 0) {

        if (num === 100) return '不限';

        return num + 'k';

    }

}

Copy the code

That’s it for the core code, finish sprinkling, optimize, and so on. Can you see for yourselves