Recalculate html output on button click

Question

I am using jQuery range slider to calculate a monthly price. I also have two buttons to switch between monthly and annual pricing. I have everything working except one big thing: when I click the button to change between pricing models, I want the price output to recalculate instantly. If I click the button and then move the slider it recalculates, but I need it to recalculate immediately on button click. I have tried many, many things including: putting the calculation inside the click handler (which made it not work at all), I tried the 'reload();' method, I tried adding calculate(); and more. I'm sure it's something easy I'm missing, but I can't find the right search terms to find the answer. I've mocked up a codepen: http://codepen.io/redbranchmedia/pen/jEEqEw

Here is my JS:

var pricepermonth;
pricepermonth = 129;

$(".m2mbtn").on('click', function() {
  $(".m2mbtn").addClass('active');
  $(".annualbtn").removeClass('active');
  pricepermonth = 129;
  return false;
});

$(".annualbtn").on('click',  function() {
  $(".annualbtn").addClass('active');
  $(".m2mbtn").removeClass('active');
  pricepermonth = 99;
  return false;
});

$('.priceslider').slider({ 
    max: 11,
    min: 1,
    value: 2,
    slide: function(e,ui) {
      var calcprice;
      calcprice = (ui.value * pricepermonth);

        $('.pricingtable').html("$" + calcprice + "/mo");
    }
  });

Answer 1

http://jsfiddle.net/L897s0jL/

ADD setPrice() to .m2mbtn and .annualbtn on click function

function setPrice(pricepermonth)
{
    var calcprice;
    var value=$s.slider( "value" );
      calcprice = (value * pricepermonth);

        $('.pricingtable').html("$" + calcprice + "/mo");
}