使範圍輸出響應

Question

好吧，所以我遇到的問題是使範圍響應輸出。

它目前工作正常，當你因爲值正在以像素位置運行的代碼，但是當你調整視與滑塊正確未對齊。我想可能使用百分比而不是像素來對齊輸出可能會解決問題，但我不知道如何正確實現它。

我已經試過搞亂與它周圍，但沒有運氣，沒有人知道我能做到這一點？

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

任何幫助將不勝感激！

** 編輯 **請閱讀

所以下面穆罕默德·優素福回答了這個問題，他在會做它該做的工作方式，所以我投了它，但是他已經重複了兩次變量在代碼中（有關詳細信息，請參閱他的答案）。我認爲有這樣做的更有效的方法（使用更少的代碼），所以如果任何人有更好的方式做到這一點，請分享。

Answer 1

只是你需要更新你的窗口大小調整變量來改變自己的價值觀..和使每個函數內部輸入事件打印超過一次，並且使其無法讀取新的變量調整後..所以我把它拿出來運行每個事件獨立

編輯時，

$(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

重要說明：這個代碼將工作完美的，如果你有相同的寬度輸入..如果它不一樣的寬度，你需要使用元素的數組來獲得每個元素的寬度