<form action="#" class="calc_form">
                <div class="row calc_form__select_group">
                    <div class="calc_form__select">    
                        <select name="industry" id="industry" required="required">
                            <option value="">---</option>
                            <option value="1">Anlagen / Maschinenbau</option>
                            <option value="2">Automotive</option>
                            <option value="3">Bau</option>
                            <option value="4">Beratung</option>
                            <option value="5">Chemie</option>
                            <option value="6">Consumer</option>
                            <option value="7">Dienstleistung</option>
                            <option value="8">Elektronik / Elektrotechnik</option>
                            <option value="9">Energie / Wasser / Umwelt</option>
                            <option value="10">Financial Services</option>
                            <option value="11">Handel</option>
                            <option value="12">Health Care</option>
                            <option value="13">IT / Telekommunikation</option>
                            <option value="14">Medien</option>
                            <option value="15">Sonstige Branchen</option>
                            <option value="16">Sonstige verarbeitende Industrie</option>
                            <option value="17">Transport / Logistik / Verkehr</option>
                      
                        </select>
                    </div>

                    <div class="calc_form__select">    
                        <select name="function" id="function" required="required">
                            <option value="">---</option>
                            <option value="1">C-Level</option>
                            <option value="2">Einkauf / Materialwirtschaft / Logistik / SCM</option>
                            <option value="3">Finanzen/Controlling</option>
                            <option value="4">IT</option>
                            <option value="5">Marketing / Vertrieb</option>
                            <option value="6">Personal</option>
                            <option value="7">Produktion / Technik/Operations</option>
                            <option value="8">Zentralfunktione</option>a
                        </select>
                    </div>

                    <div class="calc_form__select">    
                        <select name="situation" id="situation">
                            <option value="">---</option>
                            <option value="2">Vakanzüberbrückung</option>
                            <option value="3">Wachstum</option>
                        </select>
                    </div>

                    <div class="calc_form__select">    
                        <select name="type" id="type">
                            <option value="">---</option>
                            <option value="1">Freiberufler</option>
                            <option value="2">Mitarbeiterüberlassung</option>
                            <option value="3">Interim Organfunktion</option>
                        </select>
                    </div>
                </div>
            
                <div class="calc_form__result">
                    <div class="calc_result">
                        <h3>Honorar in EUR</h3>
                        <div class="calc_result__bar">
                            <div class="calc_result__bar--value">

                            </div>
                        </div>
                        <div class="calc_result__text">
                            <span>500,-</span>
                            <span>1500,-</span>
                            <span>3000,-</span>
                        </div>
                    </div>

                    <div class="val"></div>
                </div>
            
                <div class="calc_form__submit">
                    <button class="calc__button" type="reset">Reset</button>
                </div>
            </form> 
body {
    width: 80%;
    text-align: center;
    margin: auto;
    background: #0276B5;
    margin-top: 5em;
    font-family: sans-serif;
}

.calc_form {
    margin: auto;
}

.calc_form__select_group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

.calc_form__select {
    position: relative;
    width: 24%;
}

select {
  border: none;
  
  &:after {
    display: none;
  }
}

.calc_form__select::before {
    content: "";
    background: #fff;
    width: 30px;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    pointer-events: none;
}
.calc_form__select::after {
    content: "";
    background: transparent;
    width: 13px;
    height: 13px;
    position: absolute;
    transform: rotate(45deg);
    border: solid orange;
    border-width: 0 2px 2px 0;
    right: 15px;
    top: 12px;
    pointer-events: none;
}

.calc_form__select_group select {
    padding: 14px 12px;
    font-size: 14px;
    width: 100%;
    background: #fff;
    font-weight: bold;
}

.calc_form__result {
    margin-bottom: 1.5em;
}

.calc_result h3 {
    text-align: left;
    color: orange;
}

.calc_result {
    display: block;
}

.calc_result__bar {
    height: 3px;
    width: 100%;
    background: #fff;
    position: relative;
}

.calc_result__bar--value {
    transition: .5s;
    background: orange;
    height: 3px;
    margin: auto;
    position: absolute;
    left: 1%;
}

.calc_result__bar--value::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: orange;
    position: absolute;
    left: 0;
    top: -5px;

}

.calc_result__bar--value::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: orange;
    position: absolute;
    right: 0;
    top: -5px;

}

.calc_result__text {
    display: flex;
    justify-content: space-between;
    color: #eee;
    margin-top: 1em;
    margin-bottom: 2em;
}

.calc__button {
    padding: 12px 50px;
    background: orange;
    color: #fff;
    border: none;
}
View Compiled
 jQuery(document).ready(function(){

        function calculate_minmax(old_result, new_result) {
            if(typeof(new_result)==='undefined'){
                console.log('undefined new result')
                return { "min": old_result.min, "max": old_result.max}
            }else{
                if(new_result.min) {
                    min = old_result.min * new_result.min
                    max = old_result.max * new_result.max
                    return { "min": min, "max": max}
                } else {
                    return { "min": old_result.min, "max": old_result.max}
                }
            }
        }

        function set_minmax(result) {
            calc_bar = jQuery('.calc_result__bar--value');

            if(typeof(result)==='undefined'){
                console.log('undefined mang!!')
                return false;
            }else{
                // 0 = 500
                // 100 = 3000
                // 3000-500 = 2500 = 100%
                // hasil dikurangi 500, cari persennya
                // misal 1700 -> 1700 - 500 = 1200 => 48%
                // (n/2500)*100 => 48

                min = 100-(((result.min-500)/2500)*100)
                max = 100-(((result.max-500)/2500)*100)
                calc_bar.css('right',max+"%")
                calc_bar.css('left',min+"%")
                console.log('min=>'+min)
                console.log('max=>'+max)
            }

        }

        console.log('readyyy')

        

        calc = {
                    "calculations": {
                        "situation": {
                        "1": {
                            "min": 1.0,
                            "max": 1.2
                        },
                        "2": {
                            "min": 1.0,
                            "max": 1.2
                        },
                        "3": {
                            "min": 1.0,
                            "max": 1.2
                        }
                        },
                        "type": {
                        "1": {
                            "min": 1.0,
                            "max": 1.2
                        },
                        "2": {
                            "min": 1.0,
                            "max": 1.2
                        },
                        "3": {
                            "min": 1.0,
                            "max": 1.2
                        }
                        }
                    },
                    "results": {
                        "1": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "2": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "3": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "4": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "5": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "6": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "7": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "8": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "9": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "10": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "11": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "12": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "13": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "14": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "15": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "16": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "17": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        },
                        "18": {
                        "1": {
                            "min": 1700,
                            "max": 2500
                        },
                        "2": {
                            "min": 1700,
                            "max": 2500
                        },
                        "3": {
                            "min": 1700,
                            "max": 2500
                        },
                        "4": {
                            "min": 1700,
                            "max": 2500
                        },
                        "5": {
                            "min": 1700,
                            "max": 2500
                        },
                        "6": {
                            "min": 1700,
                            "max": 2500
                        },
                        "7": {
                            "min": 1700,
                            "max": 2500
                        },
                        "8": {
                            "min": 1700,
                            "max": 2500
                        }
                        }
                    }
                }
        
        old_result = { "min": 0, "max": 0}  
        function_result = {}
        jQuery('.calc_form__select select').change(function(e){
            console.log(jQuery(this).attr('name'))

            

            attrName = jQuery(this).attr('name');

            industry = jQuery('.calc_form__select #industry').val();
            functions = jQuery('.calc_form__select #function').val();
            situation = jQuery('.calc_form__select #situation').val();
            type = jQuery('.calc_form__select #type').val();
            
            switch(attrName){
                case 'function': 
                    old_result = calculate_minmax(calc.results[industry][functions])
                    function_result = old_result

                    set_minmax(old_result)
                    break;
                case 'situation':
                    situation_data = calc.calculations.situation[situation]
                    situation_result = calculate_minmax(calc.results[industry][functions], situation_data)
                    old_result = situation_result
                    
                    set_minmax(old_result)
                    break;
                case 'type':
                    type_data = calc.calculations.type[type]
                    type_result = calculate_minmax(old_result, type_data)
                    old_result = type_result
               
                    pake_function = calculate_minmax(function_result, type_data)
                    old_result = pake_function
                    
                    set_minmax(old_result)
                    break;
                default:
                    return false;

            }
        })

    })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js