Preset Button Concept

by skibulk

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<button id="preset1">Preset 1</button>
<button id="preset2">Preset 2</button>
<button id="preset3">Preset 3</button>
<input type="range" min="1" max="10" value="5" step="1" id="range1">
<input type="range" min="1" max="10" value="5" step="1" id="range2">
<input type="range" min="1" max="10" value="5" step="1" id="range3">

CSS

body * {
  display: block;
  margin: 20px;
  width: 200px;
}

JavaScript

$('#preset1').click(function(event){
	setRange('#range1', 1);
	setRange('#range2', 2);
	setRange('#range3', 3);
});

$('#preset2').click(function(event){
	setRange('#range1', 2);
	setRange('#range2', 4);
	setRange('#range3', 6);
});

$('#preset3').click(function(event){
	setRange('#range1', 3);
	setRange('#range2', 6);
	setRange('#range3', 9);
});

function setRange(id, val){
	$(id).val(val);
}