El marco de trabajo front-end usa vue + element ui, por lo que se selecciona la barra de progreso del componente de interfaz de usuario de elemento

Dirección del componente de elemento

1. Página principal

<template>
    <div class="">
        <div class="content-hd">
            <h2>Two-way progress bar</h2>
        </div>
        <div class="content-bd">
            <BidirectionSliderBar 
                :base_info="base_info" 
                v-on:input_value="user_input_value" 
                v-on:is_true="is_true_value"
            ></BidirectionSliderBar>
        </div>
    </div>
</template>
<script>

import BidirectionSliderBar from '../components/bidirectionSliderBar'  // Two-way progress bar

export default {
    data() {
        return {
            // configuration
            product_config:{
                min_single_amount_lower_limit: 0.1,  // Lower limit
                max_single_amount_upper_limit: 200000,
                default_min_single_amount:0.3,
                default_max_single_amount:100000,
            },

            base_info: {},

            min_single_amount              : '', 
            max_single_amount              : '', 

            flag_is_true_value: '',
        }
    },
    created() {
        this.authority()
    },
    components: {
        BidirectionSliderBar
    },
    methods: {
        authority() {
            this.base_info.min_limit = this.product_config.min_single_amount_lower_limit  // Lower limit
            this.base_info.max_limit = this.product_config.max_single_amount_upper_limit // Limit limit
            this.base_info.user_recv_amount_input = [
                this.product_config.default_min_single_amount,
                this.product_config.default_max_single_amount
            ]
        },

        // Receive the data passed by the progress bar sub-component
        user_input_value(value){
            this.input_value_for_user = value
        },

        // Receive the data passed by the progress bar sub-component
        is_true_value(value){
            this.flag_is_true_value = value
        }
    }
}
</script>
<style scoped>
 /deep/ .el-slider__marks-text {
   white-space: nowrap ;
}
 .slider-bar-input{
    width: 150px;
}
</style>

2. Componente de barra de progreso

componentes/bidirectionSliderBar.vue archivo

<template>
<!--  Two-way progress bar -->
    <div class="slider-bar-wrp">
        <div class="tc">
            <el-input 
                class="slider-bar-input" 
                v-model="input_value[0]" 
                @input="on_change_input_value_min"
                placeholder="Please enter content"
            ></el-input>
            <span class="gapl">yuan</span>
            <span > - </span>
            <el-input 
                class="slider-bar-input" 
                v-model="input_value[1]"
                @input="on_change_input_value_max"
                placeholder="Please enter content"
            ></el-input>
            <span class="gapl">yuan</span>
            <div class="el-form-item__error">{{ err_msg }}</div>
        </div>
        <el-slider
            v-if="isShow" 
            range
            :step="move_step"
            :min="marks_min"
            :max="marks_max"
            :marks="marks"
            @change="on_input_user_recv_amount"
            :format-tooltip="formatTooltip"
        ></el-slider>
    </div>  
</template>

<script>

import publichFun from "../utils/fun"

export default {
    props:{
        base_info: {}
    },
    data() {
        return {
            isShow: true,
            user_recv_amount: [], // input box / slider data
            err_msg: '',
            input_value: [],

            marks_min: 0.3,
            marks_max: 5000,
            move_step: 1, // Slider step size
            marks: {},// Slider subscript

            flag_user_recv_amount_month_min: true,
            flag_user_recv_amount_month_max: true,

            isShow: true
        }
    },
    created(){
        this.marks_min = Number(this.base_info.min_limit)
        this.marks_max = Number(this.base_info.max_limit)

        let min = Number(this.base_info.min_limit)
        let max = Number(this.base_info.max_limit)

        this.move_step = parseInt((max - min) / 10)

        this.marks[min] = publichFun._addMilliFormat(parseFloat(this.base_info.min_limit).toFixed(2))
        this.marks[max] = publichFun._addMilliFormat(parseFloat(this.base_info.max_limit).toFixed(2))

        this.input_value = this.base_info.user_recv_amount_input

        this.user_recv_amount[0] = Number(this.input_value[0])
        this.user_recv_amount[1] = Number(this.input_value[1])
    },
    methods: {
        formatTooltip(val) {
            return publichFun._addMilliFormat(parseFloat(val).toFixed(2))
        },

        /**
                   * @function input value
         */
        on_change_input_value_min(val) {
            let split = val.split('.')
            if (
                publichFun._compareFloat(this.base_info.min_limit,val) > 0 || isNaN(val)
            ) {
                this.err_msg = 'Not less than:' + this.marks[this.marks_min]
                this.flag_user_recv_amount_month_min = false
            } else if (split[1] && split[1].length > 2) {
                this.err_msg = 'Only keep up to two decimal places'
                this.flag_user_recv_amount_month_min = false
            } else if (publichFun._compareFloat(val, this.base_info.max_limit)) 
            {
                this.err_msg = 'Cannot be greater than:' + this.marks[this.marks_max]
                this.flag_user_recv_amount_month_min = false
            } else {
                this.err_msg = ''
                this.flag_user_recv_amount_month_min = true

                const that = this;
                this.input_value[0] = val
                this.user_recv_amount[0] = Number(val)

                that.isShow =false

                setTimeout(function (){
                    that.isShow = true
                }, 1)
            }
            // Pass parameters to the parent component
            this.$emit('input_value', this.input_value)
            this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
        },

        /**
                   * @function input value
         */
        on_change_input_value_max(val) {
            let split = val.split('.')
            if (
                publichFun._compareFloat(this.base_info.min_limit, val) > 0 || isNaN(val)
            ) {
                this.err_msg = 'Not less than:' + this.marks[this.marks_min]
                this.flag_user_recv_amount_month_max = false
            } else if (split[1] && split[1].length > 2) {
                this.err_msg = 'Only keep up to two decimal places'
                this.flag_user_recv_amount_month_max = false
            } else if (publichFun._compareFloat(val, this.base_info.max_limit)) 
            {
                this.err_msg = 'Cannot be greater than:' + this.marks[this.marks_max]
                this.flag_user_recv_amount_month_max = false
            } else {
                this.err_msg = ''
                this.flag_user_recv_amount_month_max = true
                
                const that = this

                this.input_value[1] = val
                this.user_recv_amount[1] = Number(val)

                that.isShow =false

                setTimeout(function (){
                    that.isShow = true
                }, 1)
            }
            
            // Pass parameters to the parent component
            this.$emit('input_value', this.input_value)
            this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
        },

        on_input_user_recv_amount(val) {
            this.err_msg = ''
            this.input_value = val

            this.flag_user_recv_amount_month_min = true
            this.flag_user_recv_amount_month_max = true

            this.user_recv_amount[0] = Number(val[0])
            this.user_recv_amount[1] = Number(val[1])

            // Pass parameters to the parent component
            this.$emit('input_value', this.input_value)
            this.$emit('is_true', (this.flag_user_recv_amount_month_min && this.flag_user_recv_amount_month_max))
        }
    }
}
</script>
<style >
.slider-bar-wrp {
  padding: 30px 160px;
}
.slider-bar-wrp .slider-bar-input {
  margin-bottom: 24px;
  width: 150px;
}
.slider-bar-wrp .enhance-payment{
  margin-right: -40px;
  margin-top: 17px;
}
</style>