Skip to content

Instantly share code, notes, and snippets.

@jonchretien
Last active December 26, 2015 03:29
Show Gist options
  • Save jonchretien/7086704 to your computer and use it in GitHub Desktop.
Save jonchretien/7086704 to your computer and use it in GitHub Desktop.
Rough prototype using a slider control.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment