Skip to content

[angular] best slider 라이브러리, angular-slider

angular로 개발을 하다보면 UI용 플러그인은 역시 jQuery구나 하는 생각이 자주 든다.

angular의 UI plugin은 종류와 화려함, 기능에서 뭐 하나 만족스러운게 없다.

하지만 어쪄랴 react는 이것보다 더 심하다던데…

여기에 완벽한 (거의) 기능으로 무장한 slider plugin이 있어 소개한다.

https://github.com/angular-slider/angularjs-slider

딱 하나 문제가 있는데 실행을 수동으로 해줘야한다는거다…

manual fire라니… 시스템 메모리를 효율적으로 사용하기 위한게 아니라.

angular가 실행될때 화면에 보이지않으면 실행되지 않는다.

 

다행이 그 방법이 어렵지는 않는데, 아래 형식으로 진행하면된다.

vm.refreshSlider = function () {
  $timeout(function () {
  $scope.$broadcast('rzSliderForceRender');
  });
};

자세한 실행 방법(사용 방법이 아님)은 아래 링크참조

http://jsfiddle.net/3jjye1cL/

 

무엇보다 마음에 든 기능은

custom CSS 기능과 Template 지원이다.

참고로 최저 값은 {{modelLabel}}, 최고 값은 {{cecilLabel}}로 표시할 수 있다.

이 기능으로 호갱노노 같은 필터를 구현할 수 있다.

 

그리고 slider end fire (슬라이더 이동 후 특정 명령어 실행)이 가능해서 추가 기능을 실행할 수 있다.

 

angular slider라고 검색하면 여러가지 라이브러리가 뜨는데 slider는 이 아이가 정답이다.

Published inAngularJS