#GWC UI Library : RangeSlider

웹 UI 라이브러리인 GWC에서 제공하는 RangeSlider 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

#rangeslider {
    width: 20em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    rangeslider.addEventListener("change", () => {
        label.content = `슬라이더 값 변경: ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}`;
    });

    button1.addEventListener("click", () => {
        gwcMessage(`범위 슬라이더의 현재 값은 ${rangeslider.value1.toFixed(1)} - ${rangeslider.value2.toFixed(1)}입니다.`);
    });

     button2.addEventListener("click", () => {
        rangeslider.label = "신장";
        rangeslider.min = 30;
        rangeslider.max = 250;
        rangeslider.value1 = 160;
        rangeslider.value2 = 190;
        rangeslider.toFixed = 0;
        rangeslider.unit = "cm";
    });    

    GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.