Вертикальный элемент бумажного слайдера

Question

Мне нравятся элементы полимерной бумаги, и я хочу использовать элемент слайдера.

Однако, я бы хотел, чтобы он был вертикальным. Я попытался применить css, чтобы повернуть его;

transform: rotate(90deg);

Это вращает ползунок, но не на "вход"; нужно еще нажать и перетащить мышь горизонтально, чтобы получить «ручку» для перемещения вверх и вниз.

Это очень раздражает, и любая помощь приветствуется!

Answer 1

tk-vslider - это тонкий бумажный слайдер с функцией поворота. Используйте это вместо бумажного слайдера, чтобы решить эту проблему. Установка с использованием беседки "tkvslider": "0.5.5"

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

Твики.

, если rotate == true затем

1. div#sliderContainer является CSS, повернутой на 90deg
2. Событие on-trackx из div#sliderKnob заменяется on-track
3. В методе track принимают e.dy вместо e.dx.

Answer 2

Это может быть довольно взломанный способ сделать это, но мы подошли год с тех пор, как вы requested this as feature, и это не похоже, что это большая часть приоритета. Я полагаю, что это (по большей части) позволит продолжить обновление paper-slider от команды Polymer, не завися от третьих сторон, которые могут не продолжать поддерживать (из того, что я могу сказать, пользовательский элемент 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-slidersource code, единственным реальным изменением является то, что вместо того, чтобы схватить координаты х в e.detail.dx мы захватить у в e.detail.dy. Отрицательный множитель необходим только в том случае, если вы хотите получить меньшие значения в нижней части слайдера, и вы повернете 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(); 
} 

Основное изменение этого метода является строка, которая вычисляет отношение. Раньше это было var ratio = (event.detail.x - rect.left)/this._w;

Answer 3

<s-slider> имеет vertical свойство для вертикальной ориентации https://github.com/StartPolymer/s-slider