[javascript] range slider input

드래그된 값을 출력하는 range slider를 만들어보자

처음에는 아주 복잡할 줄 알았는데 input type 중 range를 사용하면 아주 간단히 사용할 수 있다!

span#value에는 js로 값을 출력할 예정이다

 

속성

- max : input의 최댓값

- min : input의 최솟값

- step : input에 입력할 수 있는 숫자들 사이의 간격

- value : input의 초깃값

<div class="slidecontainer">
  <h1>Range Slider</h1>
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
</div>

 

드래그 대상인 동그란 버튼은 css에서 ::-webkit-slider-thumb , ::-moz-range-thumb로 커스텀 해주면 된다 

    <style>
        .slidecontainer {
            width:20%;
            margin : 40px auto 0;
        }

        .slider {
            -webkit-appearance: none;
            width: 100%;
            height: 5px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        .slider:hover {
            opacity: 1;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #ff3b3b;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #ff3b3b;
            cursor: pointer;
        }
    </style>

 

값을 화면에 출력하는 스크립트는 oninput을 사용하면 된다.

oninput은 값이 변경된 직후에 발생하는 이벤트이다.

 

처음 초기값을 한번 innerHTML해준 후 변경될 때 마다 innerHTML을 해주면 된다!

<script>
    var slider = document.getElementById("myRange");
    var output = document.getElementById("value");
    output.innerHTML = slider.value;

    slider.oninput = function() {
        output.innerHTML = this.value;
    }
</script>