Making Bereich Ausgabe reagieren

Question

Ok, so das Problem, das ich habe, ist die Ausgabe für den Bereich reagiert.

Es funktioniert derzeit gut, wenn Sie den Code ausführen, da der Wert in Pixel positioniert wird, aber wenn Sie die Größe des Ansichtsfensters ändern, wird nicht korrekt mit dem Schieberegler ausgerichtet. Ich dachte, das Ausrichten der Ausgabe mit Prozentsätzen anstelle von Pixeln könnte das Problem beheben, aber ich bin mir nicht sicher, wie ich es richtig implementieren soll.

Ich habe versucht, damit herumzuspielen, aber kein Glück, weiß jemand, wie ich das erreichen kann?

HTML:

<form> 
    <div class="range-control" data-thumbwidth="20"> 
     <input id="inputRange" type="range" min="0" max="100" step="1" value="0"> 
      <div><output name="rangeVal">0</output></div> 
    </div> 
</form> 

CSS:

*, 
*:before, 
*:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html { 
    font-family: Arial, sans-serif; 
} 

form { 
    padding-top: 100px; 
    margin: 0 auto; 
} 

.range-control { 
    position: relative; 
} 

input[type=range] { 
    display: block; 
    width: 100%; 
    margin: 0; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    outline: none; 
} 

input[type=range]::-webkit-slider-runnable-track { 
    position: relative; 
    height: 12px; 
    border: 1px solid #b2b2b2; 
    border-radius: 5px; 
    background-color: #e2e2e2; 
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.1); 
} 

input[type=range]::-webkit-slider-thumb { 
    position: relative; 
    top: -5px; 
    width: 20px; 
    height: 20px; 
    border: 1px solid #999; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    background-color: #fff; 
    box-shadow: inset 0 -1px 2px 0 rgba(0,0,0,0.25); 
    border-radius: 100%; 
    cursor: pointer; 
} 

output { 
    position: absolute; 
    top: 20px; 
    width: 50px; 
    height: 24px; 
    border: 1px solid #e2e2e2; 
    margin-left: -15px; 
    background-color: #fff; 
    border-radius: 3px; 
    color: #777; 
    font-size: .8em; 
    line-height: 24px; 
    text-align: center; 
} 

input[type=range]:active + output { 
    display: block; 
} 

JQUERY:

$('.range-control').each(function(){ 
    var container = $(this), 
     input = container.find('input'), 
     output = container.find('output'), 
     rangeWidth = input.width(), 
     thumbWidth = container.attr('data-thumbwidth'), 
     startValue = input.val(), 
     startOffset = ((rangeWidth - thumbWidth)/100) * startValue + '%'; 

    output 
     .css({ 
      'left' : startOffset 
     }); 

    $(input).on('input', function(){ 
     var value = this.value, 
      offset = ((rangeWidth - thumbWidth)/100) * value; 

    output 
     .val(value) 
     .css({ 
      'left' : offset 
     }); 

    }); 
}); 

JSFiddle

Jede Hilfe würde sehr geschätzt werden !!!

** EDIT ** Bitte

So unten Mohamed-Yousef Lesen Sie beantwortet die Frage in der Art, wie er es tun würde, was funktioniert, so habe ich es bis gestimmt, er hat jedoch die Variablen zweimal dupliziert im Code (siehe seine Antwort für Details dazu). Ich denke, es gibt eine effizientere Methode, dies zu tun (mit weniger Code), also wenn jemand eine bessere Möglichkeit hat, dies zu tun, bitte teilen.

Answer 1

einfach müssen Sie Ihre Variable auf Fenstergröße aktualisieren, um seine Werte zu ändern .. und machen Sie Ihre Eingabe-Ereignis innerhalb jeder Funktion mehr als einmal zu drucken und es nicht zum Lesen einer neuen Variablen nach der Größenänderung .. so ich nehme es aus und führen jedes Ereignis einzelnen

NACH EDIT

$(document).ready(function(){ 
    var container,input,output,rangeWidth,thumbWidth,startValue,startOffset; 
    // make a function to update variable 
    var update_variable = function(){ 
     $('.range-control').each(function(){ 
      container = $(this); 
      input = container.find('input'); 
      output = container.find('output'); 
      rangeWidth = input.width(); 
      thumbWidth = container.attr('data-thumbwidth'); 
      startValue = input.val(); 
      startOffset = ((rangeWidth - thumbWidth)/100) * startValue; 

     output 
      .css({ 
       'left' : startOffset 
      }); 

     }); 
    } 
    // update variable after document ready 
    update_variable(); 

    // input input event 
    $('.range-control > input').on('input', function(){ 
      var value = this.value, 
       offset = ((rangeWidth - thumbWidth)/100) * value; 

     $(this).closest('.range-control').find('output') 
      .val(value +'%') 
      .css({ 
       'left' : offset 
      }); 
     }); 
    // update variable in window resize 
    $(window).on('resize',update_variable); 
}); 

DEMO HERE

Wichtiger Hinweis: Dieser Code funktioniert perfekt, wenn Sie Eingaben mit der gleichen Breite haben .. wenn es nicht die gleiche Breite ist, müssen Sie ein Array von Elementen verwenden, um jedes Element Breite zu erhalten