📂프로그래밍

CSS로 더블 슬라이더 구현하는 예제

쇼케이스

위 슬라이더의 두 점을 드래그 해보면 실시간으로 두 개의 입력창에 값이 업데이트되고, 반대로 입력창에 값을 입력하면 슬라이더의 위치가 업데이트된다. 이 기능은 사용자에게 직관적인 인터페이스를 제공하여 범위 선택 등의 작업에 유용하다.

더블 슬라이더라는 개념은 HTML의 기본적인 <input type="range"> 요소를 두 개 겹쳐서 사용하는 방식으로 구현되며, 근본적으로 값이 업데이트되는 기능은 자바스크립트의 이벤트 리스너를 통해 이루어진다. 다시 말해, 설령 아무런 기능이 없을지라도 더블 슬라이더 그 자체는 자바스크립트를 필요로 하지 않는다. 이 외에도 레인지 사이를 색칠하거나 아예 두 값이 역전되지 않게끔하는 식의 구현이 있을 수 있지만, 이 쇼케이스에서 보여주는 기능을 포함한 그 모든 것들은 단지 부차적인 요소에 불과하다.

코드

CSS

<style>
    input[type="range"] {
        position: absolute;
        width: 100%;
        pointer-events: auto;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        position: relative;
        cursor: grab;
        z-index: 1;
    }

    .slider-track {
        position: relative;
    }
    input[type="range"]::-webkit-slider-runnable-track {
        background: lightgray;
    }
</style>

• input[type="range"] {position: absolute;}: 여러 슬라이드를 같은 곳에 두기 위해 필수적인 스타일이다. 절대위치를 지정함으로써 두 슬라이더가 같은 위치에 겹쳐지게 된다.
• input[type="range"]::-webkit-slider-thumb: 슬라이더의 핸들 부분을 스타일링하는 데 사용된다.
• background: lightgray;: -webkit-slider-runnable-track가 없으면 슬라이더가 겹쳐나타나긴 하는데 각자 따로 놀아서 알아보기 어렵고 사실상 더블 슬라이더라고 부를 수 없다. 배경색을 지정함으로써 핸들만 노출시키고 실제 레인지는 보이지 않게 한다.

HTML

<input type="text" id="v1-text" value="20">
<input type="text" id="v2-text" value="80">
<div class="slider-track" id="slider">
    <input type="range" id="v1-slider" min="0" max="100" value="20" step="1">
    <input type="range" id="v2-slider" min="0" max="100" value="80" step="1">
</div>
<br><br>

• <input type="text">: 두 슬라이더의 값을 표시하면서도, 사용자가 직접 입력할 수 있는 입력창을 제공한다.
• <div class="slider-track" id="slider">: 여러 슬라이더를 감싸는 컨테이너다.
• <input type="range">: 실제 슬라이더를 나타내는 HTML 요소다.

javascript

<script>
    const v1Slider = document.getElementById('v1-slider');
    const v2Slider = document.getElementById('v2-slider');
    const v1Text = document.getElementById('v1-text');
    const v2Text = document.getElementById('v2-text');
    
    function updateRange() {
        v1Text.value = parseInt(v1Slider.value);
        v2Text.value = parseInt(v2Slider.value);
    }

    function updateSlider() {
        v1Slider.value = parseInt(v1Text.value);
        v2Slider.value = parseInt(v2Text.value);
    }

    v1Slider.addEventListener('input', updateRange);
    v2Slider.addEventListener('input', updateRange);
    v1Text.addEventListener('input', updateSlider);
    v2Text.addEventListener('input', updateSlider);
    
    updateRange();
</script>

• update*(): 슬라이더와 입력창의 값을 동기화하는 함수다. 슬라이더의 값이 변경되면 입력창에 해당 값을 표시하고, 입력창의 값이 변경되면 슬라이더의 위치를 업데이트한다.
• addEventListener: 어떤 이벤트가 발생하는지 알 수 없으니 레인지 업데이트와 슬라이드 업데이트를 모든 경우의 수에 대응했다.