Vue uses calculated properties to complete the production of dynamic sliders

<div id="slider">
        <!-- Main animation effects: font, progress bar and expression change with the percentage of emotion level-->
        <label for="range" :style="{'color':getHappinessColor}">Emotional level: {{val}}%</label>
<!-- The color of the slider should be bound to the pre-set color, and the color can be changed at will-->
        <!-- The value of the emotion level should also change with the val value-->
        <input type="range" name="" id="range" min="0" max="100" v-model="val">
 
<!-- The value of the slider should be bound to val, which is written to the calculated property in order to synchronize with the range of the slider fill color below-->
        <div class="slider outer">
 <!-- Let's make the width of label equal to the width of our data center val, so that the label will move with the movement of the slider, achieving the effect of changing the expression-->
        <label for="" class="slider inner" :style="{'width':val+'%',
        'border-radius':greaterThanFifty">
                <span :style="{'right':getPlacement}">{{getHappiness}}</span>
            </label>
        </div>
    </div>

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
:root {
    /* Global CSS variables */
    --yellow: #ffd100;
    --orange: #ff6a13;
    --darkGray: #53565a;
    --midGray: #888b8d;
    --white: #fff;
  }
*,*::after,*::before{
    color: var(--darkGray);
    box-sizing: border-box;
}
html,body {
      width: 100%;
      height: 100%;
}
body{
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--white);
}
#slider{
    /* Local CSS variables */
    --roundness: 20px;
    width: 100%;
    max-width: 600px;
    outline: 1px dashed red;
    padding: 4vh;
 
    /* Grid layout */
    display: grid;
    justify-content: stretch;
}
#slider>label{
    width: 100%;
    font-size: 1.5em;
    padding: 0 0 0.5em;
    margin: auto;
}
#slider input{
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    height: calc(var(--roundness) * 2);
    cursor: pointer;
}
#slider .outer{
    width: 100%;
    height: var(--roundness);
    background-color: var(--midGray);
    border-radius: var(--roundness);
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 0;
    margin: auto;
    grid-row: 2/3;
    grid-column: 1/2;
}
 
#slider input:focus + .outer {
    outline: 1px dashed var(--orange);
  }
 
#slider label.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    background: linear-gradient(to left, var(--yellow), var(--orange));
    border-top-left-radius: var(--roundness) !important;
    border-bottom-left-radius: var(--roundness) !important;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.5, 0.4, 0.2, 1);
    text-align: right;
    font-size: calc(var(--roundness) * 2);
    line-height: 1;
  }
  #slider label.inner span {
    position: absolute;
    right: -2px;
    top: calc(50% - var(--roundness) * 2);
    top: calc(var(--roundness) * -.3);
    transition: inherit;
  }

<script src="./js/vue.js"></script>
    <script>
        let a = new Vue({
            el:"#slider",
            data() {
                return {
                    val: 70,
                    //Key points, also used to dynamically associate 1: emotion percentage, 2: displayed text expression}
            },
            mounted() {
                this.val = Math.floor(Math.random() * 101)
            },
            computed: {
        getPlacement: function () {
            return `${(-0.009 * ((this.val * -1) + 104))}em`;
            // Get the position. Because it is a calculated property, it is equivalent to binding to val. After binding to the bottom span, it is equal to the width bound to val above.
        },
        greaterThanFifty: function () {
            return this.val > 50 ? `var(--roundness)` : `0`;
            // When the val value is greater than 50, the border changes. It can be omitted or not bound. It is not critical.},
        getHappinessColor: function () {
            return `rgba(255, ${106 + (103 / 100 * this.val)}, ${(Math.floor(this.val * -1 / 7.692)) + 13}`;
            // Function to get color, you can change the value at will, but the color transition above is more natural},
        getHappiness: function () {
            let mood;
            // "Physically bind" the val value to all expressions
            if (this.val == 0) {
                mood = "🤬"
            } else if (this.val < 10) {
                mood = "😡"
            } else if (this.val < 20) {
                mood = "😠"
            } else if (this.val < 30) {
                mood = "😦"
            } else if (this.val < 40) {
                mood = "☹️"
            } else if (this.val < 50) {
                mood = "🙁"
            } else if (this.val < 60) {
                mood = "😐"
            } else if (this.val < 70) {
                mood = "🙂"
            } else if (this.val < 80) {
                mood = "😊"
            } else if (this.val < 90) {
                mood = "😄"
            } else if (this.val < 100) {
                mood = "😃"
            } else if (this.val == 100) {
                mood = "😍"
            }
            return mood;
        }
    }
        })
    </script>