ixRangeSlider()

Type : jQuery Plugin

Support : 0.3

Return : jQuery

  • 범위설정 슬라이더 Plugin
    ※한번 적용된 대상에는 "clear" 하기 전에는 다시 적용되지 않는다.

Options

대상 Node의 inline 속성으로 설정하는 data-ix-options의 Properties
property description required default ver
min 선택할 수 있는 최소값 설정 (음수 설정가능) ✔ 0.3
max 선택할 수 있는 최대값 설정 (음수 설정가능) ✔ 0.3
gap 슬라이드가 움딕일때 한번 반환될 수치의 간격을 설정 1 0.3
snap 슬라이드가 움딕일때 gap으로 구간을 보정하여 이동하도록 설정 false 0.3
values 초기 선택값 설정, 설정하지 않으면 min, max 값이 적용된다.
ex)100 250		 min 설정값, max 설정값 0.3
disable 초기 비활성화 설정
둘중 min하나면 비활성화 시키고 싶다면 Boolean값이 아닌 disable:min 처럼 type을 넣으면 된다.		 false 0.3
number-format "ix-input"의 노출되는 문자열 형식을 "2,000" 형식으로 표출 false 0.3
correct-endpoint 슬라이더를 이동후 snap구간으로 보정하여 이동하도록 설정
※snap:true 설정시 false로 설정된다.		 false 0.3
duration correct-endpoint:true 설정시 animate 지속시간 설정, 1000/1초 0 0.3
axis 슬라이더 방향축이 가로인지 세로인지 설정 ( "horizontal", "vertical" ) horizontal 0.3
add-first-str "ix-input"의 노출되는 문자열 앞에, 해당 문자를 추가해서 노출한다.
※영문, 숫자 이외의 문자는 encodeURIComponent("문자")로 변환하여 설정해야 한다.		 0.3
add-last-str "ix-input"의 노출되는 문자열 뒤에, 해당 문자를 추가해서 노출한다.
※영문, 숫자 이외의 문자는 encodeURIComponent("문자")로 변환하여 설정해야 한다.		 0.3
number-fixed input의 노출되는 숫자의 소수점 표현 설정 ex)27.00
※number-format 이 설정되었을때만 작동한다.		 0 0.3.5
currency-format input의 노출되는 숫자를 국가별 currency format으로 설정 ex)currency-format:de = 1.000,00
기본 format (2,000)을 사용하는 국가 이외에 (de, sk, no, nl, it, be, fr, es, pl)를 지원
※v0.3.7 에서 pl 추가
※number-format 이 설정되었을때만 작동한다.		 0.3.6

Methods

  • ixRangeSlider( options ) : jQueryver 0.3~

    범위 슬라이더 기본적용
    • options : Object
      각종 옵션들 설정, 설정하지 않으면 기본 옵션이 설정된다, Property는 카멜표기법 사용
      옵션 항목들은 "Options" 참조
      ※옵션설정은 되도록 inline으로 data-ix-options속성에 설정하길 권장한다.

  • ixRangeSlider( 'changeValues', values ) : jQueryver 0.3~

    현재 선택되어진 최대, 최소 선택값 변경
    • values : Array
      변경할 minValue, maxValue 를 배열로 설정
      ※min설정과 max설정을 벗어나면 보정하여 설정된다.

  • ixRangeSlider( 'enable', type ) : jQueryver 0.3~

    슬라이더를 활성화 시킨다.
    • type : String
      둘중 하나만 활성화 시킬때 설정한다. "min" or "max" 설정

  • ixRangeSlider( 'disable', type ) : jQueryver 0.3~

    슬라이더를 비활성화 시킨다.
    • type : String
      둘중 하나만 비활성화 시킬때 설정한다. "min" or "max" 설정

  • ixRangeSlider( 'getValues' ) : Arrayver 0.3~

    현재 min, max값을 배열로 반환

  • ixRangeSlider( 'clear' ) : jQueryver 0.3~

    슬라이더 적용 해제, 등록된 이벤트들도 모두 삭제되어 초기화 된다.

Events

No. type description property ver
1 ixRangeSlider:init 초기 설정시 전달 되는 Event
  • values: 현재 min, max값을 배열로 반환
 0.3
2 ixRangeSlider:slideStart 슬라이더 제어가 시작될때 전달 되는 Event
  • values: 현재 min, max값을 배열로 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
  • currentType: 현재 전달되 이벤트 대상이 "min"인지 "max"인지 반환
 0.3
3 ixRangeSlider:change 슬라이더 값이 변경 되었을시 전달 되는 Event
  • values: 현재 min, max값을 배열로 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
  • currentType: 현재 전달되 이벤트 대상이 "min"인지 "max"인지 반환
 0.3
4 ixRangeSlider:slideEnd 슬라이더 제어가 끝났을때 전달 되는 Event
슬라이더 값이 변경 되지 않아도 무조건 호출된다.
  • values: 현재 min, max값을 배열로 반환
  • userInteraction: 사용자가 슬라이더를 조작하여 변경되었을시 true 반환
  • currentType: 현재 전달되 이벤트 대상이 "min"인지 "max"인지 반환
 0.3

Example