jonchretien/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>slider module</title>
  <style>
  input[type="range"] {
    width: 300px;
  }
  input[type="text"] {
    width: 35px;
  }
  .square {
    height: 175px;
    width: 175px;
  }
  </style>
</head>
<body>

  <input type="range" min="-300" max="300" step="50" value="0">
  <input type="text">
  <div id="square" class="square"></div>

  <script>
  (function() {

    'use strict';

    var SliderModule = {

      /**
       * Stores range values.
       * @type {Array}
       */
      numbers: [],

      /**
       * Default configuration (can be overwritten by optional options object).
       * @type {Object}
       */
      defaults: {
        colors: ['#aa4643', '#3d96ae', '#80699b', '#2f7ed8', '#db843d', '#92a8cd', '#a47d7c', '#b5ca92', '#4572a7', '#9467bd', '#89a54e', '#1f77b4', '#cedb9c', '#31a354'],
        input: 'input[type="text"]',
        slider: 'input[type="range"]',
        square: 'square',
      },

      /**
       * Sets up module.
       */
      init: function(options) {
        this.mergeConfigOptions(options);
        this.run();
      },

      /**
       * Merges optional config options with defaults.
       *
       * @param {Object} [options] - Optional options object passed in by constructor.
       */
      mergeConfigOptions: function(options) {
        this.options = {};

        for (var prop in this.defaults) {
          if (this.defaults.hasOwnProperty(prop)) {
            this.options[prop] = this.defaults[prop];
          }
        }

        for (prop in options) {
          if (options.hasOwnProperty(prop)) {
            this.options[prop] = options[prop];
          }
        }

        return this.options;
      },

      /**
       * Runs initial behaviors.
       */
      run: function() {
        // store variables
        this.input = document.querySelector(this.options.input);
        this.slider = document.querySelector(this.options.slider);
        this.square = document.getElementById(this.options.square);

        this.getRangeValues();
        this.bindEventHandlers();
        this.updateValues();
      },

      /**
       * Finds all the range values; from the min value to the max value, inclusive.
       *
       * @returns {Array}
       */
      getRangeValues: function() {
        var currentValue = parseInt(this.slider.min, 10),
            steps = parseInt(this.slider.step, 10),
            len = (Math.abs(this.slider.min) + Math.abs(this.slider.max)) / steps;

        // loop over the number of values and increment current value by the number of steps
        for (var i = 0; i < len + 1; i++) {
          if (i === 0) {
            this.numbers.push(currentValue);
          } else {
            currentValue = currentValue + steps;
            this.numbers.push(currentValue);
          }
        }

        return this.numbers;
      },

      /**
       * Updates the input and color values.
       */
      updateValues: function() {
        this.updateElementColor();
        this.printRangeValue();
      },

      /**
       * Binds event handlers.
       */
      bindEventHandlers: function() {
        this.slider.addEventListener('change', this.updateValues.bind(this), false);
      },

      /**
       * Prints the current range value to a text field.
       */
      printRangeValue: function() {
        this.input.value = this.slider.value;
      },

      /**
       * Updates the square's background color based on the current range value.
       * Looks for the array index of the current range value in the 'numbers' array.
       */
      updateElementColor: function() {
        this.square.style.backgroundColor = this.options.colors[this.numbers.indexOf(parseInt(this.slider.value, 10))];
      }

    };

    SliderModule.init();

  })();
  </script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>slider module</title>
	<style>
	input[type="range"] {
	width: 300px;
	}
	input[type="text"] {
	width: 35px;
	}
	.square {
	height: 175px;
	width: 175px;
	}
	</style>
	</head>
	<body>

	<input type="range" min="-300" max="300" step="50" value="0">
	<input type="text">
	<div id="square" class="square"></div>

	<script>
	(function() {

	'use strict';

	var SliderModule = {

	/**
	* Stores range values.
	* @type {Array}
	*/
	numbers: [],

	/**
	* Default configuration (can be overwritten by optional options object).
	* @type {Object}
	*/
	defaults: {
	colors: ['#aa4643', '#3d96ae', '#80699b', '#2f7ed8', '#db843d', '#92a8cd', '#a47d7c', '#b5ca92', '#4572a7', '#9467bd', '#89a54e', '#1f77b4', '#cedb9c', '#31a354'],
	input: 'input[type="text"]',
	slider: 'input[type="range"]',
	square: 'square',
	},

	/**
	* Sets up module.
	*/
	init: function(options) {
	this.mergeConfigOptions(options);
	this.run();
	},

	/**
	* Merges optional config options with defaults.
	*
	* @param {Object} [options] - Optional options object passed in by constructor.
	*/
	mergeConfigOptions: function(options) {
	this.options = {};

	for (var prop in this.defaults) {
	if (this.defaults.hasOwnProperty(prop)) {
	this.options[prop] = this.defaults[prop];
	}
	}

	for (prop in options) {
	if (options.hasOwnProperty(prop)) {
	this.options[prop] = options[prop];
	}
	}

	return this.options;
	},

	/**
	* Runs initial behaviors.
	*/
	run: function() {
	// store variables
	this.input = document.querySelector(this.options.input);
	this.slider = document.querySelector(this.options.slider);
	this.square = document.getElementById(this.options.square);

	this.getRangeValues();
	this.bindEventHandlers();
	this.updateValues();
	},

	/**
	* Finds all the range values; from the min value to the max value, inclusive.
	*
	* @returns {Array}
	*/
	getRangeValues: function() {
	var currentValue = parseInt(this.slider.min, 10),
	steps = parseInt(this.slider.step, 10),
	len = (Math.abs(this.slider.min) + Math.abs(this.slider.max)) / steps;

	// loop over the number of values and increment current value by the number of steps
	for (var i = 0; i < len + 1; i++) {
	if (i === 0) {
	this.numbers.push(currentValue);
	} else {
	currentValue = currentValue + steps;
	this.numbers.push(currentValue);
	}
	}

	return this.numbers;
	},

	/**
	* Updates the input and color values.
	*/
	updateValues: function() {
	this.updateElementColor();
	this.printRangeValue();
	},

	/**
	* Binds event handlers.
	*/
	bindEventHandlers: function() {
	this.slider.addEventListener('change', this.updateValues.bind(this), false);
	},

	/**
	* Prints the current range value to a text field.
	*/
	printRangeValue: function() {
	this.input.value = this.slider.value;
	},

	/**
	* Updates the square's background color based on the current range value.
	* Looks for the array index of the current range value in the 'numbers' array.
	*/
	updateElementColor: function() {
	this.square.style.backgroundColor = this.options.colors[this.numbers.indexOf(parseInt(this.slider.value, 10))];
	}

	};

	SliderModule.init();

	})();
	</script>

	</body>
	</html>