세로 용지 슬라이더 요소

Question

필자는 폴리머 용지 요소를 좋아하고 용지 슬라이더 요소를 사용하고 싶습니다.

그러나 나는 그것이 수직이되고 싶습니다. 나는 그것을 회전시키기 위해 CSS를 적용하려고 시도했다.

transform: rotate(90deg);

이것은 "입력"슬라이더 회전 아니지만; "손잡이"를 위아래로 움직이기 위해서는 여전히 마우스 을 수평으로을 클릭하고 드래그해야합니다.

이것은 매우 성가신 일이며 모든 도움은 감사하겠습니다!

Answer 1

tk-vslider은 회전 기능이있는 조정식 용지 슬라이더입니다. 이 문제를 해결하려면 용지 슬라이더 대신이 도구를 사용하십시오. 정박기를 사용하여 설치 "tkvslider": "0.5.5"

<tk-vslider rotate="true"></tk-vslider> 

조정하십시오.

이어서

1. div#sliderContainer는 90DEG
2. 이벤트가 CSS 회전 rotate == true 경우 div#sliderKnob의 on-trackx 대신 e.dx의 e.dy을 track 방법에서 on-track
3. 로 대체된다.

Answer 2

이것은 꽤 해킹 할 수있는 방법 일 수 있지만, requested this as feature 이후 1 년 내로 예정되어 있으며 아직 우선 순위가 높지 않습니다. 이 부분은 지원을 계속할 수없는 제 3 자에 의존하지 않고 Polymer 팀의 paper-slider에 대한 지속적인 업데이트를 허용 할 것입니다. (여기서 언급 한 사용자 정의 요소 tk-vslider은 지원하도록 업데이트되지 않았습니다. 중합체 1.0).

먼저 css. 90도 회전하면 슬라이더 상단에 작은 값이 표시된다는 것을 알았습니다. 반 직관적 인 것으로 나타났습니다. 그래서 대신 -90도 회전합니다. 일부 이상한 물건은 마진이 발생하지만 결국 나를 위해 그것을 한 일이다 : 나는 내 자신의 사용자 정의 요소 내부 내 종이 슬라이더를했다, 그래서 나는 준비 콜백에 다음 코드를 넣어,하지만 난 상상

paper-slider { 
    width: 20vh; 
    margin: 10vh -10vh; 
    --webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

당신은 당신이 슬라이더 요소를 선택할 수있는 한 당신이 필요로하는 곳 어디든지 놓을 수 있습니다. 기본적으로 드래그 이벤트에 응답하는 데 paper-slider 메서드를 재정의 할 것입니다. 방법은 다음과 같습니다

var slider = this.$.slider; 
slider._trackX = function(e) { 

    if (!slider.dragging) { 
    slider._trackStart(e); 
    } 

    var dx = Math.min(slider._maxx, Math.max(slider._minx, (-1 * e.detail.dy))); 
    slider._x = slider._startx + dx; 

    var immediateValue = slider._calcStep(slider._calcKnobPosition(slider._x/slider._w)); 
    slider._setImmediateValue(immediateValue); 

    // update knob's position 
    var translateY = ((slider._calcRatio(immediateValue) * slider._w) - slider._startx); 
    slider.translate3d(translateY + 'px', 0, 0, slider.$.sliderKnob); 
}; 

는 거의이 방법의 전체가 paper-slider source code에서 복사되는 유일한 진정한 변화는 그 대신에이 X 우리는 e.detail.dy에 Y를 잡아 e.detail.dx 좌표를 잡아이다. 음수 배율은 슬라이더의 아래쪽에 더 작은 값을 넣고 paper-slider을 -90도 회전 한 경우에만 필요합니다. Polymer 팀이 _trackX 메서드의 이름을 변경하면이 솔루션이 중단됩니다. 나는 이것이 조금 늦다는 것을 알고있다.하지만 잘하면 (비슷한 방식으로) 다른 사람들을 찾는데 도움이 될 것이다.

업데이트 : 아마도이 솔루션을 조금 더 테스트해야하며, 클릭 이벤트 (다른 ​​하나는 드래그 만 처리)를 처리하기 위해 덮어 써야하는 다른 기능이 있음이 드러났습니다.

slider._bardown = function(event) { 
    slider._w = slider.$.sliderBar.offsetWidth; 
    var rect = slider.$.sliderBar.getBoundingClientRect(); 
    var ratio = ((rect.bottom - event.detail.y)/slider._w); 
    var prevRatio = slider.ratio; 

    slider._setTransiting(true); 

    slider._positionKnob(ratio); 

    slider.debounce('expandKnob', slider._expandKnob, 60); 

    // if the ratio doesn't change, sliderKnob's animation won't start 
    // and `_knobTransitionEnd` won't be called 
    // Therefore, we need to manually update the `transiting` state 

    if (prevRatio === slider.ratio) { 
    slider._setTransiting(false); 
    } 

    slider.async(function() { 
    slider.fire('change'); 
    }); 

    // cancel selection 
    event.preventDefault(); 
} 

이 방법의 주요 변화는 비율을 계산 라인 : 나는 내 다른 방법을 아래에이를 추가하여 작업을 얻었다. 그것은

Answer 3

<s-slider>var ratio = (event.detail.x - rect.left)/this._w;가 수직 방향 https://github.com/StartPolymer/s-slider