<div class="container">
<div id="pricingperso">
<img src="calculator-bg-phone.png" alt="bg" id="calculator-bg"/>
<div id="steps"><div class="step" id="stepone">
<div class="textzone"><h1>Step 1</h1><h3>Platform number ?</h3><span class="selRangeone"><span id="selRange">1</span> Platform<span id="pluralone"></span></span></div>
<input type="range" min="1" max="3" step="1" value="1" name="stpone" onchange="document.getElementById('selRange').innerHTML = this.value; setView(value);"/> 

</div>
<div class="step" id="steptwo"><div class="textzone"><h1>Step 2</h1><h3>Year commitment ?</h3><span class="selRangeone"><span id="selRangetwo">1</span> Year<span id="pluraltwo"></span></span></div>
  <input type="range" min="1" max="3" step="1" value="1" name="stptwo" onchange="document.getElementById('selRangetwo').innerHTML = this.value; setView(value);"/> 
  
</div>
<div class="step" id="finalstep">
<span id="result"></span>
<div><p>setup price :</p></div>
<span id="setup">200 €</span>
<div><p>fee / month :</p></div>
<span id="price">49 €</span>
</div></div>
</div>

#pricingperso
{
	width:951px;
	background-image:url(http://www.webamaury.fr/Doc/img/calculator-bg.png);
	background-size:contain;
	height:250px;
	margin:99px auto;
	background-repeat:no-repeat;
}
#pricingperso .step
{
	float:left;
	width:33.3%;
	height:183px;
}
#pricingperso .textzone
{
	margin-top:10px;
}
#pricingperso h1
{
	color: white;
	font-family: sans-serif, Arial;
	font-size: 1.6em;
	padding-left: 110px;
	font-weight: 100;
	line-height:30px;
}
#pricingperso h3
{
	font-size:1.1em;
	color:#ffffcc;
  line-height:10px;
  text-align:center;
	padding-right:35px;
}
#pricingperso .selRangeone
{
	font-size: 2em;
color: white;
margin-left: 70px;
padding-top: 10px;
padding-bottom: 18px;
display: block;
}
#pricingperso #selRangetwo
{
	margin-left:20px;
}
/*#pricingperso #selRangetwo
{
	font-size: 2em;
	color: white;
	margin-left: 120px;
	padding-top: 10px;
	padding-bottom: 15px;
	display: block;
}
*/#pricingperso input
{
	transform:scale(1.4);
	-webkit-transform:scale(1.4);
	-o-transform:scale(1.4);
	-moz-transform:scale(1.4);
	transform-origin:left;
	-webkit-transform-origin:left;
	-o-transform-origin:left;
	-moz-transform-origin:left;
	margin-left:48px;
	cursor:pointer;
	
}
#pricingperso #result
{
	display:none;
}
#pricingperso #finalstep p
{
	color: white;
font-family: sans-serif, Arial;
font-size: 1.6em;
margin-top: 20px;
padding-left: 70px;
font-weight: 100;
line-height: 30px;
margin-bottom:10px;
}
#pricingperso #finalstep #price, #pricingperso #finalstep #setup
{
	font-size:1.5em;
	color:#ffffcc;
	padding-left:105px;
}
#pricingperso #calculator-bg
{display:none;}

function setView(valeur) {

var first=document.getElementById("selRangetwo").innerHTML
var second=document.getElementById("selRange").innerHTML

var result=first+second;

document.getElementById("result").innerHTML=result;
	
	if(second==1){
		document.getElementById("pluralone").innerHTML="";}
	else{
		document.getElementById("pluralone").innerHTML="s";}
	if(first==1){
		document.getElementById("pluraltwo").innerHTML="";}
	else{
		document.getElementById("pluraltwo").innerHTML="s";}

	if(second==1){
		document.getElementById("setup").innerHTML="200 €";}
	else if(second==2){
		document.getElementById("setup").innerHTML="360 €";}
	else if(second==3){
		document.getElementById("setup").innerHTML="500 €";}	

  if (result==11) { 
    document.getElementById("price").innerHTML="49 €";}
  else if (result==12) { 
    document.getElementById("price").innerHTML="99 €";}
  else if (result==13) { 
    document.getElementById("price").innerHTML="150 €";}
  else if (result==21) { 
    document.getElementById("price").innerHTML="40 €";}
  else if (result==22) { 
    document.getElementById("price").innerHTML="90 €";}
  else if (result==23) { 
    document.getElementById("price").innerHTML="140 €";}  
  else if (result==31) { 
    document.getElementById("price").innerHTML="30 €";}
  else if (result==32) { 
    document.getElementById("price").innerHTML="80 €";}
  else if (result==33) { 
    document.getElementById("price").innerHTML="120 €";}
}