Created
September 16, 2018 22:00
-
-
Save kebman/9aedbc7a3fba92ea343c8a920e7bd25e to your computer and use it in GitHub Desktop.
EUR/USD Currency Slider in HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>EUR/USD Slider</title> | |
<meta charset="utf-8"> | |
<style type="text/css"> | |
.slidecontainer { | |
width: 20em; /* Width of the outside container */ | |
} | |
/* Slider */ | |
.slider { | |
-webkit-appearance: none; /* Override default CSS styles */ | |
appearance: none; | |
width: 100%; /* Full-width */ | |
height: 25px; /* Specified height */ | |
background: #d3d3d3; /* Grey background */ | |
outline: none; /* Remove outline */ | |
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ | |
-webkit-transition: .2s; /* 0.2 seconds transition on hover */ | |
transition: opacity .2s; | |
} | |
/* Mouse-over effects */ | |
.slider:hover { | |
opacity: 1; /* Fully shown on mouse-over */ | |
} | |
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ | |
.slider::-webkit-slider-thumb { | |
-webkit-appearance: none; /* Override default look */ | |
appearance: none; | |
width: 25px; /* Set a specific slider handle width */ | |
height: 25px; /* Slider handle height */ | |
background: #4CAF50; /* Green background */ | |
cursor: pointer; /* Cursor on hover */ | |
} | |
.slider::-moz-range-thumb { | |
width: 25px; /* Set a specific slider handle width */ | |
height: 25px; /* Slider handle height */ | |
background: #4CAF50; /* Green background */ | |
cursor: pointer; /* Cursor on hover */ | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>EUR/USD</h1> | |
</header> | |
<section> | |
<article> | |
<h1>€ → $ Slider</h1> | |
<div class="slidecontainer"> | |
<input type="range" min="80000" max="160000" value="116292" class="slider" id="myRange"> | |
</div> | |
<p>EURUSD: <span id="eurusd"></span></p> | |
<p>EUR 10.00 = USD <span id="eur"></span></p> | |
<p>USD 10.00 = EUR <span id="usd"></span> </p> | |
</article> | |
</section> | |
<footer></footer> | |
</body> | |
</html> | |
<script type="text/javascript"> | |
const slider = document.getElementById("myRange"); | |
const eurusd = document.getElementById("eurusd"); | |
const usd = document.getElementById("usd"); | |
const eur = document.getElementById("eur"); | |
const acc = 100000; | |
eurusd.innerHTML = slider.value; | |
console.log(); | |
eurusd.innerHTML = (slider.value/acc).toFixed(2); | |
usd.innerHTML = (10/(slider.value/acc)).toFixed(2); | |
eur.innerHTML = (10*(slider.value/acc)).toFixed(2); | |
slider.oninput = function() { | |
let sval = (this.value/acc).toFixed(2); | |
eurusd.innerHTML = sval; | |
usd.innerHTML = (10/sval).toFixed(2); | |
eur.innerHTML = (10*sval).toFixed(2); | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment