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: (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=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
      <li><img src=""/>
        <div class="title">name and more</div>
      </li>
    </div>
  </div>
</div>

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./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
      <li><img src="http://placekitten./200/125"/>
        <div class="title">name and more</div>
      </li>
    </div>
  </div>
</div>

• javascript
• jquery

• So what is RangeScroll supposed to do? – A. L Commented Mar 14, 2017 at 22:15
• RangeScroll is a function that is returned and used that is supposed to essentially sync a radio value to a percentage of the div. (similar to scrollbar) – Auzy Commented Mar 14, 2017 at 22:21
• 1 Seems overly convoluted for something you could just attach an onchange listener to the range input that just scrolls the div – A. L Commented Mar 14, 2017 at 22:22
• I am open to suggestions. I am not good with javascript and am trying to piece this together from a few examples online. – Auzy Commented Mar 14, 2017 at 22:24
• You seem like you e from a more OO background – A. L Commented Mar 14, 2017 at 22:25

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