jindo.m.Slider

Slider

목적

JMC 단일 컴포넌트 중 가장 많이 사용하는 컴포넌트로 오픈 소스 중 JMC 대체안으로 적합한 것이 있는지 비교 검토하여 적합한 컴포넌트를 선정에 도움을 준다.

후보

1. jQuery UI Slider

• 

2. noUiSlider

• 

3. rangeslider.js

• 

4. ion.rangeSlider

• 

일반적인 비교

Feature\Compoent	jQuery UI	noUiSlider	rangeslider	Ion.rangeSlider
IE Support	8+	9+	8+	8+
Git Star	9001 (All)	1409	903	689
License	MIT	WTFPL	MIT	MIT
Size	24kB / 47kB / 2kB	13.675kB / 42.556kB / 3.127kB	6.758 kB / 15.15 kB / 4.574 kB	36.203 kB / 71.283 kB / 3.406 kB
Dependency	jQuery 1.6+	No dependency	jQuery	jQuery 1.8+
First	May 18, 2008	Nov 13, 2011	Jan 12, 2014	Jan 20, 2013
Last Updated	May 21, 2015	Jul 5, 2015	Jul 12, 2015	Jul 25, 2015

Jindo 요구사항 비교 분석

Jindo 요구 사항(JC 와 JMC 의 요구사항은 대동소이)

1. 세로지원 (Vertical)

• 

2. CSS Class Naming(by prefix) (CSS Naming)

• 예제

   var oSlider = new jindo.m.Slider('slider',{
   	sClassPrefix : "slider-",/* prefix 지정을 통해 class 이름 변경 가능 */
   });

3. 값에 대한 커스텀 이벤트 핸들링 (Custom Events)
4. Multiple Thumbs (Multiple Thumbs)

• 2개 이상의 Thumb
• 3개 이상의 Thumb
• 

5. 단위 Step 지정 (Step)

• 최소 이동 간격 지정 가능

6. Animation

• 클릭에 의한 Thumb 이동 시 한번에 이동하는 것이 아닌 애니메이션 되면서 이동

기능 비교

Feature\Compoent	jQuery	noUiSlider	rangeslider	Ion.rangeSlider
Vertical	O	O	O	X
CSS Naming	X	X	O	X
Custom Events	O	O	O	O
Multiple Thumbs(Max)	2	2	1	2
Step	O	O	O	O
Animation	O	O	X	X

• 3. 값에 대한 커스텀 이벤트 핸들링이나 5) 단위 Step 지정은 모든 컴포넌트에서 가능한 기능
• Multiple Thumbs 관련 최대 2개 지원

마크업 검토 의견(접근성)

	noUiSlider	rangeslider.js	ion.rangeslider	jquery ui
Keyboard Control	X	X	X	O
Alternative Text	X	O	O	X

Alternative Text

• 시각장애인 접근성 대응
• 조절 가능한 최소, 최대, 현재 값을을 노출. 스크린 리더에서 읽히도록 하기 위한 속성
• 대안: input 에 value 를 삽입하여 값이 갱신되도록 수정하고 안내성 label 을 묶어 제공가능하다면 대응 가능

Keyboard Control

• 키보드 접근성 대응
• 키보드 좌우 방향키로 슬라이드 핸들링 기능 여부
• 대안: 불가능시 input 박스에서 값을 입력 받아 동작하도록 개선 가능

컴포넌트 별 기타 특징

noUiSlider

• 라이브러리 의존성 없음
• 자체 눈금자 표기 가능
• Non-linear Slider (각 구간별 상대적 조정량을 지정 가능)
• 구간 표기 가능
• 두 개 이상의 눈금자 사용시 최소 간격 지정 가능
• 두 개 이상의 눈금자 사용시 두개를 한번에 조정 가능(여기에도 세부적으로 옵션이 있음)
• RTL 지원

ion.rangeSlider

• 눈금 표기
• 툴팁 (현재 값에 대한 highlight 기능) 표기 가능
• 키보드 조작 옵션

요약

• noUiSlider :
  • 장: 가장 많은 기능
  • 단: IE9+ 이상, CSS Naming 불가, 키보드 접근성/시각장애인 접근성이 부족해 추가 대응 필요
• rangeslider.js :
  • 장: 적은 용량, HTML5 기본 요소를 사용하여 시각장애인 접근성 대응 됨
  • 단: 2개 이상의 핸들(Thumb) 미지원, Animation 미지원, 키보드 접근성 부족하여 추가 대응 필요
• jQuery UI:
  • 장: jQuery UI 기반의 프로젝트에서 용량/사용법 측면에서의 강점. 키보드 접근성
  • 단: CSS Naming 불가, 시각장애인 접근성 대응 부족해 추가 대응 필요
• ion.rangeSlider :
  • 장: 부가기능이 우수, 부족하지만 시각장애인 접근성 대응이 가능
  • 단: Vertical, CSS, Naming 등 모두 미지원, 키보드 접근성 접근성이 부족해 추가 대응 필요

결론

각 포커스 별로 선정이 필요

1. 다양한 기능 : noUiSlider
2. 적은 용량 : rangeslider.js
3. 기존 jQuery UI 를 사용하는 경우 : jQuery UI