2016-07-31 7 views
1

Foundation 6의 문서를 열람했는데 문제가 해결되지 않았습니다.파운데이션 6 범위 슬라이더 - 사용자가 핸들을 놓을 때 입력 값을 업데이트하십시오.

범위 슬라이더에 바인딩 된 입력 필드가 있고 사용자가 핸들을 놓으면 입력 값의 형식을 지정하는 함수를 호출하려고합니다. 슬라이더는 쉼표로 값을 처리 할 수 ​​없기 때문에이 핸들을 사용해야합니다. 1,200.87과 같은 점들).

moved.zf.slider 이벤트가 이상적이라고 생각했지만 핸들이 움직이면 설명서가 실행된다고 말합니다. 그러나 핸들이 이동되는 동안 여러 번 발사됩니다. 사용자가 마우스 버튼을 놓거나 스크린을 만지는 것을 멈 추면 한 번만 발사되는 것과 같습니다.

이 작업을 수행 할 수 있습니까?

답변

1

moved.zf.slider 화재 핸들 (스냅 단위 사이 등) 이동 그래서 당신은 다양한 입력과의 상호 작용 후 일시 정지를 기반으로하는 기능을 원하는 완료 할 때마다, 그 그래서 data-changed-delay

당신의 HTML과 함께 changed.zf.slider의 같은 일 것입니다 :

data-changed-delay="2000"는 그들이 완료 결정하기 전에 대기 할 밀리 초에서 시간입니다 (아마도 상당히 긴 2 초하지만 쉽게이 작업을 볼 수 있습니다)
<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true" data-changed-delay="2000"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span> 
    <span class="slider-fill" data-slider-fill></span> 
    <input id="result" type="hidden"> 
    </div> 

. 물론 jQuery를 통해이 작업을 수행 할 수도 있습니다. N.B. 명시 적으로 설정하지 않으면 기본값은 500ms이며 이는 일시 중지 시간을 상당히 추측합니다.

$('.slider').on('changed.zf.slider', function() { 
    //do whatever when user is done with the range slider 
}); 

모든이가하는 트리거 (changed.zf.slider) 한 후 동봉 된 스크립트를 실행 기다릴 수 있습니다 :

그런 다음 jQuery를이 같은 것입니다.

나는 JSFiddle

Reference in Foundation docs

에 예를 넣었습니다