创建带闭包的滑块

Question

我正在尝试使用 goog.fx.dom.Slide 函数实现一个带有 Closure 的内容滑块。这个想法是能够在容器 div 的底部拖动一个滑动条，并让容器 div 在用户移动滑块时相应地滑动。我当前的设置在控制台上没有出现错误，但容器 div 不会在任何地方滑动。

HTML：

<div id="sliderContainer"> 
<div id="slider">
    <div id="s-h">
        <div class="sliderBox"></div>
        ...
        <div class="sliderBox"></div>
    </div>
</div>

JS（通过单击滑块触发，有效）。 A 和 B 是目标值（例如，100 和 0，因为我只需要水平滚动）：

function slide(a, b) {
    // a and b are coordinates provided b
    var el = document.getElementById('s-h');
    var duration = 1000;
    var x = el.offsetLeft;
    var y = 0;
    var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,goog.fx.easing.easeOut);
    anim.play();}

有什么建议，或者有什么明显的错误吗？

Answer 1

require('goog.ui.Slider');

// 稍后

var slider = new goog.ui.Slider();
slider.render();

//但你还必须添加css

.goog-slider-thumb {
  top: 0;
  width: 20px;
  height: 100%;
  position: absolute;
  /* background image */
}

.goog-slider-horizontal {
  width: 200px;
  height: 20px;
  /* color, etc... */
}