diff --git a/globalHelpers.js b/globalHelpers.js
new file mode 100644
index 0000000..fea74e8
--- /dev/null
+++ b/globalHelpers.js
@@ -0,0 +1,81 @@
+/**
+ * Class to create an animation controller.
+ * It creates the 'previous' button, 'next' button, slider and also attaches
+ event listeners to them.
+ * @example
How to use AnimationController
+ *
+ *
+*/
+class AnimationController {
+ /**
+ * Create Animation Controller.
+ * @param {Object} options - Options for the controller
+ * @param {String} options.selector - A selector to target the wrapper div for the controller.
+ * @param {Number} options.min - Minimum value for the slider. Defaults to 0
+ * @param {Number} options.max - Maximum value for the slider.
+ * @param {Function} options.renderer - A function that can take the slider value and render the frame.
+ */
+ constructor(options) {
+ //Initializing options
+ this.selector = options.selector;
+ this.min = options.min || 0;
+ this.max = options.max;
+ this.renderer = options.renderer;
+
+ //Create Elements
+ this.root = d3.select(this.selector);
+ //Empty the root element
+ this.root.selectAll('*').remove();
+ this.prevButton = this.root.append('div')
+ .attr('class', 'btn btn-default ACPrev col-md-2')
+ .text('Previous');
+
+ this.slider = this.root.append('div')
+ .attr('class', 'form-group col-md-6')
+ .style('margin-top', '1%')
+ .append('input')
+ .attr('type', 'range')
+ .attr('name', 'rangeInput')
+ .attr('step', 1)
+ .attr('min', this.min)
+ .attr('max', this.max);
+ this.slider.property('value', this.min);
+
+ this.nextButton = this.root.append('div')
+ .attr('class', 'btn btn-default ACNext col-md-2')
+ .text('Next');
+
+ //Bind Event Listeners
+ this.prevButton.on('click', () => {
+ let value = parseInt(this.slider.property('value'));
+ value = (value - 1 < 0) ? value : value - 1;
+ this.slider.property('value', value);
+ this.renderer(value);
+ });
+ this.slider.on('change input', () => {
+ let value = parseInt(this.slider.property('value'));
+ this.renderer(value);
+ });
+ this.nextButton.on('click', () => {
+ let value = parseInt(this.slider.property('value'));
+ value = (value + 1 > this.max) ? value : value + 1;
+ this.slider.property('value', value);
+ this.renderer(value);
+ });
+ }
+ /**
+ * Renders the first frame
+ */
+ renderFirst() {
+ this.renderer(this.min);
+ }
+}