范围滑块控件 Scrollable Div

Question

I have the following issue: I would like to use a HTML range slider to control the position of a div scrolling horizontally below. (basically scroll bar functionality, but it will be placed away from scrollable content once in website.) To see a visual, please see my CodePe: http://codepen.io/Auzy/pen/qrXYYK?editors=1111 (I use Pug and Stylus, To see normal HTML, click the dropdown arrow to the right and select "View Compiled HTML") So far my code does not work, but it gives the basic idea of what I'm trying to do:

JS:

(function() {
  window.RangeScroll = (function() {
    RangeScroll.init = function() {
      return $('.range-scroll').each(function(idx, el) {
        return new RangeScroll($(el));
      });
    };

    function RangeScroll($el) {
      this.limit = 0;
      this.length = 0;
      this.scroll = $el;
      this.output = $el.find('.scroll-output');
      this.range = $el.find('.scroll-range');
      this.panel = $el.find('.scroll-panel');
      this.content = $el.find('.scroll-content');
      this._calc_range();
      this._add_events();
    }

    RangeScroll.prototype._calc_range = function() {
      this.limit = this.panel.outerWidth();
      return this.length = this.content.outerWidth();
    };

    RangeScroll.prototype._add_events = function() {
      return this.range.on('input', (function(_this) {
        return function(ev) {
          var $el, val;
          ev.preventDefault();
          $el = $(ev.currentTarget);
          val = $el.val();
          return _this.change_range(val);
        };
      })(this));
        };

    RangeScroll.prototype.change_range = function(val) {
      var ratio;
      ratio = -((val * .01) * (this.length - this.limit));
      this.output.val(val);
      return this.content.css({
        'transform': "translateY(" + ratio + "px)",
        '-webkit-transform': "translateY(" + ratio + "px)",
        '-moz-transform': "translateY(" + ratio + "px)",
        '-ms-transform': "translateY(" + ratio + "px)"
      });
    };

    return RangeScroll;

  })();

  $(function() {
    if ($('.range-scroll').length) {
      return RangeScroll.init();
    }
  });

}).call(this);

HTML:

<form class="rangeSlider">
  <input class="scroll-range" id="scroll-range" type="range"/>
</form><br/>
<div class="range-scroll">
  <div class="bems-scroller scroll-panel">
    <div class="scroll-content" id="scrolling-container">
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten.com/200/125"/>
        <div class="title">name and more</div>
      </li>
    </div>
  </div>
</div>

Answer 1

Literally all you need is something like this as the javascript: (remove console.log when you're going live)

var scroll = document.getElementById("scroll-range");

scroll.oninput = function () {
    console.log(this.value);
    var panel = document.getElementById("scrolling-container");
    panel.scrollLeft = this.value;
}

At the moment it only moves the div a little bit, but since I'm quite unfamiliar with pug and stylus, can't really do too much. But I think you get the idea. Shouldn't be too hard to achieve what you want.

codepen: http://codepen.io/anon/pen/evEKRK?editors=1111

Update

This one works to what you want:

var scroll = document.getElementById("scroll-range");

scroll.oninput = function () {
    var panel = document.getElementById("scrolling-container");

    var total = panel.scrollWidth - panel.offsetWidth;
    var percentage = total*(this.value/100);

    console.log(total);
    panel.scrollLeft = percentage;
    //console.log(percentage);
}