input type="range" 크롬에서 value 표시

chrome 브라우저에서 현재 inpyt type="range"속성의 range의 범위는 숫자로 표기되지 않습니다.

chrome 브라우저에서 range의 현재 value값을 보여줄 수 있는 jQuery입니다. 표기하고 싶을때 사용할 수 있는 jQuery를 소개해 드리겠습니다.

<style>

.controller .tbl .range-slider__value{

display:none;

}

@media screen and (-webkit-min-device-pixel-ratio:0){

.controller .tbl .range-slider__value{

display: inline-block;

position: relative;

width:45px; 

padding:5px; 

margin:0 0 0 8px; 

font-size:13px; 

color: #444; 

text-align: center; 

background:#e3f1fe;}

}

</style>  /*chrome 브라우저에서만 사용할 수 있도록 hack적용*/

<script type="text/javascript">

var rangeSlider = function(){

  var slider = $('.range-slider'),

      range = $('.range-slider__range'),

      value = $('.range-slider__value');

    

  slider.each(function(){

    value.each(function(){

      var value = $(this).prev().attr('value');

      $(this).html(value);

    });

    range.on('input', function(){

      $(this).next(value).html(this.value);

    });

  });

};

rangeSlider();

</script>

<div class="range-slider">

  <input class="range-slider__range" type="range" value="100" min="0" max="500">

  <span class="range-slider__value">0</span>

</div>

스크립트를 적용하면 위와같이 range의 범위설정에따라 span영역에 숫자가 움직입니다.