[JS] 이중/다중 Range 라이브러리 NoUiSlider, 정말 간편히 구현 가능

divrange는 기본적으로 input 제공으로는 하나의 값에 대한 범위만을 지원한다. 하지만 구현하다보면 min,max 두 값을 지정하여 범위를 설정해야 하거나 혹은 더 많은 값에 대한 범위를 설정해야 하는 경우가 있다 오늘은 이런 구현에 정말 많은 도움이 되는 NoUiSlider라는 라이브러리에 대해서 알아보겠다.

 

NoUiSlider

https://refreshless.com/nouislider/

noUiSlider - JavaScript Range Slider | Refreshless.com

 

위 사이트에서 예제 코드 및 어떻게 활용하면 되는지 자세히 볼 수 있다. 간단한 js 활용과 option 설정으로 커스텀 하려면 정말 복잡한 다중 range를 쉽게 사용할 수 있다.

 

간단히 몇개만 쓰실 분들은 해당 페이지 html 헤더 부분에 cdn으로 가져오는 것을 추천한다. 보통 나같은 경우 cdn js에서 검색하여 가져온다. cdnjs에 관한 자세한  정보는 아래 링크에서 보자

 

https://to-moneyking.tistory.com/44

[Sample] 이미지 cdn 예제로 가져오기 좋은 사이트

 

실제 사용

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>

 

HTML

<div id="install-slider"></div>

 

JS

const install_slider = document.getElementById('install-slider');
noUiSlider.create(install_slider, {
    start: [20, 80],
    connect: true,
    step : 2,
    range: {
        'min': 0,
        'max': 100
    }
});

install_slider.noUiSlider.on('update', async (values, handle) => {

    var value = values[handle];

    if(handle===0) $scope.install.count.min = value;
    else if(handle===1) $scope.install.count.max = value;

    $timeout();    
});

 

결과

 

 

변경된 값에 대한 정보 가져오기

JS

install_slider.noUiSlider.on('update', async (values, handle) => {

    var value = values[handle];

    if(handle===0) $scope.install.count.min = value;
    else if(handle===1) $scope.install.count.max = value;

    $timeout();    
});

저 같은 경우 현재 프로젝트에서 angular js를 사용하기 때문에 $scope라는 문법을 사용하였습니다.

 

함수 형태는 어떤 프레임워크에서 사용하든지 똑같으며 handle은 다중 선택의 구분자입니다. 2개의 다중 range를 구성했을떄 min은 handle 값이 0이고 max는 handle 값이 1입니다.

 

value에 handle index를 넣어 값을 가지고 올 수 있습니다.