Create Slider with Closure

Question

I'm trying to implement a content slider with Closure, using the goog.fx.dom.Slide function. The idea is to be able to drag a slide bar on the bottom of a container div, and have the container div slide accordingly as the slider is moved by the user. I get no errors on the console with my current setup, but the container div doesn't slide anywhere.

HTML:

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

JS (fired from a click on the slider, which works). A and B are the destination values (for example, 100 and 0, since I only need horizontal scrolling):

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

Any advice, or anything obviously wrong?

Answer 1

require('goog.ui.Slider');

// then later

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

// but you also have to add css

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

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