재단 슬라이더
재단 슬라이더를 끌어 값의 범위를 사용자가 선택할 수 :
사용하여 슬라이더 <div class="range-slider" data-slider> "데이터 슬라이더> 만듭니다. 에서 <div> 안에 추가,이 <span> 요소 : <span class="range-slider-handle"> 직사각형의 슬라이더 (파란색 배경) 만들기 <span class="range-slider-active-segment"> 슬라이더 영역 후 회색 막대 슬라이더한다.
참고 : 슬라이더 자바 스크립트가 필요합니다. 그래서 당신은 한답니다의 JS를 초기화해야합니다 :
예
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
<! - 초기화 재단 JS ->
<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>
»시도
필렛 및 비활성화 슬라이더
사용 .radius 및 .round 둥근 모서리 슬라이더를 추가하는 클래스. 사용 .disabled 슬라이더를 사용하지 않도록 클래스를 :
예
<사업부 클래스 = "범위 - 슬라이더 반경"데이터 슬라이더> ... </ DIV>
<사업부 클래스 = "범위 - 슬라이더 라운드"데이터 슬라이더> ... </ DIV>
<사업부 클래스 = "범위 슬라이더가 데이터 슬라이더 비활성화"> ... </ DIV>
»시도
수직 슬라이더
사용 .vertical-range 클래스와 data-options="vertical: true;" ;" 수직 슬라이더를 만들려면 :
예
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
슬라이더 값
기본적으로, 중간에 슬라이더 바 ( "50"값). 당신은 추가 할 수 data-options="initial: num " " 속성의 기본 값을 수정할 수 :
예
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
디스플레이 슬라이더 값
우리는 슬라이더 값을 드래그 할 경우, 실시간 디스플레이에 의해 얻어 질 수없는 경우 <div> 추가 data-options="display_selector:# id " 이드로서는 id 속성 슬라이더 요소의 값과 일치 :
예
<스팬 한 id = "mySlider"> </ SPAN>
<사업부 클래스 = "범위 슬라이더 "데이터 슬라이더 데이터 옵션 = "display_selector : #mySlider;">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
데이터 옵션의 조합
다음의 예는 사용 display_selector 및 initial 데이터 옵션 :
예
<사업부 클래스 = "범위 슬라이더 "데이터 슬라이더 데이터 옵션 = "display_selector : #mySlider, 초기 : 20;">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
단계? 긴
기본적으로, 슬라이더 수의 증가를 감소시키는 이동 "1" 당신은 추가 할 수 있습니다 data-options="step: num ;" ;" 속성이 단계 값을 수정하려면? 예 (25)로 설정됩니다
예
<사업부 클래스 = "범위 슬라이더 ="데이터 슬라이더 데이터 옵션 "display_selector : #mySlider 단계 : 25;">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
사용자 정의 간격
기본적으로, "0"의 범위의 값이 "100" 당신은 추가 옵션 수있는 데이터 start 과 end 간격 값을 설정할 수 있습니다. 다음 예는 "1"에서 "20"의 값을 설정 간격 :
예
<사업부 클래스 = "범위 슬라이더 "데이터 슬라이더 데이터 옵션 = "display_selector : #mySlider는, 시작 : 1; 끝 : (20);">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
»시도
그리드를 사용하여
그리드에서 슬라이더를 사용하려면 다음을 사용 :
예
<사업부 클래스 = "작은-10 열">
<사업부 클래스 = "범위 슬라이더 "데이터 슬라이더 데이터 옵션 = "display_selector : #mySlider;">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "소형 2 열">
<! - 디스플레이 소자 (팁 : 사용 CSS는 완벽하게 위치합니다) ->
<스팬 한 id = "mySlider"스타일 = "디스플레이 : 블록; 여백 - 가기 : 14px;"> </ SPAN>
</ DIV>
</ DIV>
»시도
입력을 사용하여
다음은 사용 <input> 대신 <span> 슬라이더의 값을 표시하기를 :
예
<사업부 클래스 = "작은-10 열">
<사업부 클래스 = "범위 슬라이더 "데이터 슬라이더 데이터 옵션 = "display_selector : #mySlider, 초기 : 72;">
<스팬 클래스 = "범위 - 슬라이더 - 핸들"> </ SPAN>
<스팬 클래스 = "범위 - 슬라이더 - 활성 세그먼트"> </ SPAN>
</ DIV>
</ DIV>
<사업부 클래스 = "소형 2 열">
<! - 디스플레이 소자 (팁 : 사용 CSS는 완벽하게 위치합니다) ->
<입력 유형 = "숫자"ID = "mySlider"스타일 = "여백 - 가기 : 7px;"값 = "72">
</ DIV>
</ DIV>
»시도