Question

我喜欢Polymer纸张元素，我想使用纸张滑块元素。

但是，我希望它是垂直的。我试图用css来旋转它;

transform: rotate(90deg);

这会旋转滑块，但不会旋转“输入”;必须仍然单击并拖动鼠标水平，以使“旋钮”上下移动。

这非常烦人，任何帮助都是值得赞赏的！

Answer 1

tk-vslider是一个带有旋转功能的调整纸张滑块。使用此替代纸张滑块来解决此问题。使用bower "tkvslider": "0.5.5"

安装

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

调整。

如果rotate == true则

div#sliderContainer是css旋转了90deg
on-trackx的事件div#sliderKnob已被on-track
在方法track中，取e.dy而不是e.dx。

Answer 2

这可能是一种非常糟糕的方式，但是我们已经提升了一年，因为你requested this as feature它看起来并不是一个优先事项。我认为这将（在大多数情况下）允许来自Polymer团队的paper-slider的持续更新，而不依赖于可能无法继续支持的第三方（据我所知，提到的自定义元素tk-vslider这里尚未更新以支持Polymer 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复制而来的，唯一真正的改变是我们不是抓住e.detail.dx中的x坐标而是抓住{{1}中的y }}。只有在滑块底部需要较小的值并且将e.detail.dy旋转-90度时，才需要使用负数乘数。 请注意，如果Polymer团队更改了方法paper-slider的名称，它将破坏此解决方案。我知道这有点晚了但希望它能帮助其他人找到自己在类似的情况下（就像我一样）。

更新：可能应该更多地测试这个解决方案，结果是需要覆盖另一个函数来处理点击事件（另一个只处理拖动）。我通过在我的另一种方法下添加它来实现它：

_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>具有垂直方向的vertical属性https://github.com/StartPolymer/s-slider

Answer 4

zberry的答案不再对我有用。但是，我接受了他的回答并进行了更新。使纸张滑块垂直响应的Polymer3解决方案如下所示（使用相同的CSS zberry）：

let slider = this.shadowRoot.querySelector('paper-slider');
slider._trackX = function(event) {
  if (!slider.dragging) {
    slider._trackStart(event);
  }
  var dx =
      Math.min(slider._maxx, Math.max(slider._minx, -1 * event.detail.dy));
      slider._x = slider._startx + dx;
  var immediateValue =
      slider._calcStep(slider._calcKnobPosition(slider._x / slider._w * 100));
      slider._setImmediateValue(immediateValue);
  // update knob's position
  var translateX =
      ((slider._calcRatio(slider.immediateValue) * slider._w) - 
slider._knobstartx);
  slider.translate3d(translateX + 'px', 0, 0, slider.$.sliderKnob);
};

slider._barclick = function(event) {
  slider._w = slider.$.sliderBar.offsetWidth;
  var rect = slider.$.sliderBar.getBoundingClientRect();
  var ratio = (rect.bottom - event.detail.y) / slider._w * 100;
  if (slider._isRTL) {
    ratio = 100 - ratio;
  }
  var prevRatio = slider.ratio;
  slider._setTransiting(true);
  slider._positionKnob(ratio);
  // 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', {composed: true});
  });
  // cancel selection
  event.preventDefault();
  // set the focus manually because we will called prevent default
  slider.focus();
};

如果要从上到下滑动，则必须弄弄方向

垂直纸张滑块元素

4 个答案: