AVIA Price Slider

by Yakir Perlin

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<form>
  <div>
    50
    <div id="avia_range_slider"></div>
   7000
  </div>
 
  <p>Pay as you go units: <span id="avia_plan_minutes">0</span></p>
  
  <p>Cost per unit: <span id="avia_cost_per_minute">0</span></p>
    
  <p>Plan monthly cost: <span id="avia_plan_annual_cost">0</span></p>
    
 
</form>

CSS

#avia_range_slider
{
  margin: 0 1em;
  display: inline-block;
  min-width: 320px;
  width: 50%;
}

 body {
    margin: 40px 55px;
    font-family: Arial, sans-serif;
    font-size: 27px;
}

JavaScript

function formatMoney( x )
{
	x = x.toFixed( 2 );
  
	var thousands = Math.trunc( Math.trunc( x ) / 1000 );
  var hundreds = ( x % 1000 ).toFixed( 2 );
  var pad = '000.00';
  
  hundreds = pad.substring( 0, pad.length - hundreds.length ) + hundreds;
  
  if ( thousands > 0 )
  {
  	return thousands + ',' + hundreds;
  }
  else
  {
  	return hundreds;
  }
}

 

function updateValues()
{
	var selection = $( '#avia_range_slider' ).slider( 'value' );
  
  var minutesTable = [ 50,51, 500, 1500, 2500, 5500];
  var costTable =    [0.5,0.4,0.32,0.3, 0.28, 0.27 ];
  var plansName =    ["Basic","Plus $99/m, 300 units","Advanced $249/m 920 units","Advanced Extra $549/m 2050 units", "Pro $1099/m 4000 units","Base Premium $1999/m, 7000 units" ];

  for ( var i = 0; i < minutesTable.length; i++ )
  {
  	if ( ( i === ( minutesTable.length - 1 ) ) || ( minutesTable[ i ] <= selection ) && ( minutesTable[ i + 1 ] > selection ) )
    {
    	$( '#avia_cost_per_minute' ).text( '$' + ( costTable[ i ] ) );
      $( '#avia_plan_minutes' ).text( selection +"  (~"+plansName[i]+")");
      $( '#avia_plan_annual_cost' ).text( '$' + formatMoney( selection * costTable[ i ] ) +"/m");
      
    	break;
    }
  }
}
 
	$( '#avia_range_slider' ).slider(
  {
  	min: 50,
    max: 7000,
  	step: 1,
  	change: function ( event, ui )
    {
    	updateValues();
    },
    slide: function ( event, ui )
    {
    	updateValues();
    }
  } );
  
  
  $('#t').on('input',function(e){
    
    
    	updateFromCustom();
    
	});
  
    $('#s').on('input',function(e){
    
    
    	updateFromCustom();
    
	});
  
    $('#b').on('input',function(e){
    
    
    	updateFromCustom();
    
	});
  


    
   
 	updateValues();