2

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

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

transform: rotate(90deg);

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

这很烦人，任何帮助都值得感谢！

4

4 回答 4

0

tk-vslider是一个经过调整的具有旋转功能的纸滑块。使用它而不是纸滑块来解决这个问题。使用凉亭安装"tkvslider": "0.5.5"

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

调整。

如果rotate == true那么

  1. div#sliderContainer是 css 旋转了 90 度
  2. 的事件on-trackx被div#sliderKnob替换为on-track
  3. 在方法中track取e.dy而不是e.dx.
于 2015-04-01T09:39:22.800 回答
0

<s-slider>具有vertical垂直方向的属性https://github.com/StartPolymer/s-slider

于 2016-11-28T19:16:47.310 回答
0

这可能是一种非常老套的方法，但是自从您将其作为功能请求以来，我们已经过了一年，而且它看起来还不是优先事项。我认为这将（在大多数情况下）允许paper-sliderPolymer 团队继续更新，而无需依赖可能不会继续支持的第三方（据我所知，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 源代码中复制过来的，唯一真正的变化是，我们没有抓住 x 坐标，e.detail.dx而是抓住了 y坐标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;

于 2015-09-01T15:52:53.283 回答
0

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();
};

如果你想从上到下滑动，你必须摆弄方向

于 2018-08-09T09:24:41.530 回答