Skip to content

Instantly share code, notes, and snippets.

@DrSpeedy

DrSpeedy/demo.html

Last active April 19, 2024 12:55
Show Gist options
  • Save DrSpeedy/63398e62e83b0b8abc56ea4b7b9ecffa to your computer and use it in GitHub Desktop.
Save DrSpeedy/63398e62e83b0b8abc56ea4b7b9ecffa to your computer and use it in GitHub Desktop.
Download ZIP
HTML/JS Slider Formula Example
Raw
demo.html
<html>
<body>
<!-- Demo [fn(x), ...] slider -->
<h3>Example 1 [fn(x), ...]</h3><br/>
<label for="demoSlider1" class="form-label">Miles Driven</label>
<br/>
<input type="range" class="" min="0" max="1000" step="1" id="demoSlider1">
<br/>
Formula1 (x*2): <div id="f1"></div><br/>
Formula2 (x*3): <div id="f2"></div><br/>
<br/>
<br/>
<hr/>
<!-- Demo [fn(x,y), ...] slider -->
<h3>Example 2 [fn(x, y), ...]</h3><br/>
<label for="demoSlider21" class="form-label">Miles Driven</label>
<br/>
<input type="range" class="" min="0" max="1000" step="1" id="demoSlider21">
<br/>
<label for="demoSlider22" class="form-label">Vans Delivered</label>
<br/>
<input type="range" class="" min="0" max="1000" step="1" id="demoSlider22">
<br/>
Formula1 (x+y^2): <div id="f21"></div><br/>
Formula2 (x+y*3): <div id="f22"></div><br/>
</body>
<script type="text/javascript">
// DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
// Example 1
// ===============================================================================
// Slider input handle
var slider1 = document.getElementById('demoSlider1');
// Output Divs
var f1 = document.getElementById('f1');
var f2 = document.getElementById('f2');
// Slider Event
slider1.addEventListener('input', function() {
// Formula1
f1.innerHTML = 'fn1(' + slider1.value + ') = ' + fn1(slider1.value);
// Formula2
f2.innerHTML = 'fn2(' + slider1.value + ') = ' + fn2(slider1.value);
});
// Formula1
function fn1(x) {
return x * 2;
}
// Formula2
function fn2(x) {
return x * 3;
}
// ===============================================================================
// Example 2
// ===============================================================================
var slider2_1 = document.getElementById('demoSlider21');
var slider2_2 = document.getElementById('demoSlider22');
var f2_1 = document.getElementById('f21');
var f2_2 = document.getElementById('f22');
slider2_1.addEventListener('input', function() {
f2_1.innerHTML = 'fn2_1(' + slider2_1.value + ', ' + slider2_2.value + ') = ' + fn2_1(slider2_1.value, slider2_2.value);
f2_2.innerHTML = 'fn2_2(' + slider2_1.value + ', ' + slider2_2.value + ') = ' + fn2_2(slider2_1.value, slider2_2.value);
});
slider2_2.addEventListener('input', function() {
f2_1.innerHTML = 'fn2_1(' + slider2_1.value + ', ' + slider2_2.value + ') = ' + fn2_1(slider2_1.value, slider2_2.value);
f2_2.innerHTML = 'fn2_2(' + slider2_1.value + ', ' + slider2_2.value + ') = ' + fn2_2(slider2_1.value, slider2_2.value);
});
function fn2_1(x, y) {
return x + Math.pow(y, 2);
}
function fn2_2(x, y) {
return x + y * 3;
}
// ===============================================================================
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment