Created
September 16, 2018 22:00
-
-
Save kebman/b0c2876a90f393f08685f0530831f23c to your computer and use it in GitHub Desktop.
EUR/NOK 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/NOK 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/NOK</h1> | |
</header> | |
<section> | |
<article> | |
<h1>€ → Kr. Slider</h1> | |
<div class="slidecontainer"> | |
<input type="range" min="600" max="1100" value="965" class="slider" id="myRange"> | |
</div> | |
<p>EURNOK: <span id="eurnok"></span></p> | |
<p>NOK 100.00 = EUR <span id="eur"></span></p> | |
<p>EUR 10.00 = NOK <span id="nok"></span> </p> | |
</article> | |
</section> | |
<footer></footer> | |
</body> | |
</html> | |
<script type="text/javascript"> | |
const slider = document.getElementById("myRange"); | |
const eurnok = document.getElementById("eurnok"); | |
const eur = document.getElementById("eur"); | |
const nok = document.getElementById("nok"); | |
const acc = 100; | |
eurnok.innerHTML = slider.value; | |
console.log(); | |
eurnok.innerHTML = (slider.value/acc).toFixed(2); | |
eur.innerHTML = (100/(slider.value/acc)).toFixed(2); | |
nok.innerHTML = (10*(slider.value/acc)).toFixed(2); | |
slider.oninput = function() { | |
let sval = (this.value/acc).toFixed(2); | |
eurnok.innerHTML = sval; | |
eur.innerHTML = (100/sval).toFixed(2); | |
nok.innerHTML = (10*sval).toFixed(2); | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment