title: how do i access max and can use it in my function?
body: <p>So at the moment in my checkMaxinput function i wrote my max value was 15 and 100 in backend-benutzer and app-benutzer.
  I want the max value to replace it so i dont have to write it manually everytime the max value changes how would i do that? i tried this.max but it didnt work how do i access the max value and can implement that in my function?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var percent = 1; //Standardvalue for yearly
  var percentmonthly = 1.2 //Standardvalue for monthly
  
  //diese funktion wird ausgelöst wenn das html-dokument vollstaendig geladen wird
  document.addEventListener("DOMContentLoaded", function (event) {
  
    var updatecolor = document.querySelectorAll('.updatecolor');
    //anzeige der farbe im range slider
    document.querySelectorAll(".updatecolor").forEach(updateinputs =&gt;
      updateinputs.addEventListener("input", function () {
        var percent = calcPercent(this.value, this.min, this.max);
        const bg = getComputedStyle(this).getPropertyValue('--background');
        const slider = getComputedStyle(this).getPropertyValue('--slider');
        var colorchanger = this.getAttribute('rangecolorid');
        var sliderselect = document.querySelector('#' + colorchanger);
        sliderselect.setAttribute(
          'style',
          ` background:linear-gradient(to right,${slider},${slider} ${percent}%,${bg} ${percent}%) `
        )
      })
    );
  
    //Initiale Anzeige der Daten
    calcSum();
    
    
  });
  //hides when app-benutzer or bürosoftware-benutzer is at 100%
  function checkMaxInput(element) {
    var hidden = document.getElementById('hiddenMax');
    if (hidden) {
      this.value == this.max ? (hidden.style.visibility = 'visible') : (hidden.style.visibility = 'hidden')
    }
  }
  
  //funktion damit der Slider sich beim eingeben vom input field bewegt
  function updateUser(val, inputtype) {
    if (inputtype == 'Appuserrangecolor') {
      document.getElementById('AppInput').value = val;
    }
    if (inputtype == 'AppInput') {
      document.getElementById('Appuserrangecolor').value = val;
    }
    if (inputtype == 'Backendrangecolor') {
      document.getElementById('BackendInput').value = val;
    }
    if (inputtype == 'BackendInput') {
      document.getElementById('Backendrangecolor').value = val;
    }
    calcSum();
    checkMaxInput();
  }
  
  //Calculates the percentage of the currentval with the base of a min and max value
  function calcPercent(curval, min, max) {
    return ((curval - min) / (max - min)) * 100;
  }
  
  //Rechnung für die Anzahl von Backend und App-Benutzern
  function calcSum() {
  
  }
  
  function checkMaxInput() {
    var hidden = document.getElementById("hiddenMax");
    if (
      document.getElementById("AppInput").value === "100" ||
      document.getElementById("BackendInput").value === "15"
    ) {
      hidden.style.visibility = "visible";
    } else {
      hidden.style.visibility = "hidden";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    background-color: rgb(255, 255, 255);
    height: 100%;
    margin: 0;
  }
  
  header{
    text-align: center;
    font-size: 20px;
  }
  
  body, table, select {
    font-size: 12px;
  }
    
  
  input[type=range]{
    border-radius: 32px;
    height: 10px;
    cursor: pointer;
  }
  
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  .grid-container {
      display: grid;
    grid-template-columns:600px 250px ;
    grid-auto-rows: minmax(150px, auto);
    justify-items: stretch;
    align-items: stretch;
  }
  .grid-item-1 {
    align-self: start;
    justify-self: center;
  }
  
  .text-grey{
    color:grey;
  }
  
  .grid-container {
    padding: 60px;
    width: 100%;
    grid-template-columns: 250px 200px;
  }
  
  #Backendrangecolor, #Appuserrangecolor, #BackendInput, #AppInput {
    --background: rgb(96,125,139,0.33);
    --slider: #00ba7a;
    background: var(--background);
    -webkit-appearance: none;
    width: 150px;
    
  }
  #Backendrangecolor, #Appuserrangecolor :-moz-range-thumb {
    background: purple;
  }
  
  
  .grid-item {
    padding: 20px;
    padding-top: 15px;
    background-color: #f8f8f8;
    color: #222;
    border: 7px solid rgba(96,125,139,0.33);
  }
  
  .grid-item:nth-child(odd) {
    background-color: #f8f8f8;
  }
  
  .target { 
    display: none; 
  }
  /* Base styling*/
  body {
    background-color: #f8f8f8;
    max-width: 768px;
    margin: 0 auto;
    padding: 1em 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  
  
  a {
    text-decoration: none;
  }
  
  
  }
  
  .price-container .text {
      width: 80px;
      display: inline-block;
      text-align: right;
  }
  
  .price-container .value {
      width: 30px;
      display: inline-block;
      text-align: left;
  }
  .button {
    text-align: center;
    width: 75px;
    height: auto;
    font-size:8px;
    color:#f8f8f8 ;
    background-color: rgba(255,167,55,1);
    border: rgba(255,167,55,1);
  
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="grid-container"&gt;
        &lt;div style="width: 270px"class="grid-item"&gt;
          &lt;header&gt;Preiskalkulator&lt;/header&gt;
          &lt;div class="slidecontainer"&gt;
            App-Benutzer: &lt;br&gt;
            &lt;input id="Appuserrangecolor" value="0" type="range" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="updateUser(this.value, 'Appuserrangecolor');" class='appuser updatecolor'&gt;&lt;/input&gt;
            &lt;input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="AppInput" value="0" placeholder="1-100" rangecolorid="Appuserrangecolor" min="0" max="100" oninput="this.value = this.value &gt; 100 ? 100 : Math.abs(this.value); updateUser(this.value, 'AppInput');"&gt;&lt;br&gt;
            Bürosoftware-Benutzer: &lt;br&gt;
            &lt;input id="Backendrangecolor" value="1" type="range" rangecolorid="Backendrangecolor" min="1" max="15" oninput="updateUser(this.value, 'Backendrangecolor'); " class='backenduser updatecolor'&gt;&lt;/input&gt;
            &lt;input class='updatecolor' style="width: 30px;border-color: var(--form_border_color);" type="text" id="BackendInput" rangecolorid="Backendrangecolor" value="1" min="1" max="15" placeholder="1-15" oninput="this.value = this.value &gt; 15 ? 15 : Math.abs(this.value,); updateUser(this.value, 'BackendInput');"&gt;&lt;br&gt;
          &lt;/div&gt;
        &lt;div class="grid-item" style="width: 270px"&gt;
          &lt;div id="hiddenMax"class="button" style="margin-left: auto;margin-right: auto;margin-top: 10px;"&gt;
            &lt;button class="button" &gt;&lt;a class="button" target="blank" href="https://solutions.stressfrei.de/kontakt/"&gt;Größeres Packet auf Anfrage&lt;/a&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>