title: Change output of slider if value is greater than a certain number
body: <p>I am using the JQuery range slider and outputting a calculation to an html element. I have everything working thus far except that, if the value of the slider is greater than 10, I want to display alternate text rather than the price. You can see a codepen here: <a href="http://codepen.io/redbranchmedia/pen/jEEqEw" rel="nofollow">http://codepen.io/redbranchmedia/pen/jEEqEw</a></p>
  
  <p>I added a conditional to the setPrice function. That technically "worked", but I need to slide the slider to something greater than 10, then click one of the buttons to get it to change to text. I tried to add an if/else statement inside the slide function and store it in a variable, but that broke the slider entirely. You can see my code below. As soon as the slider is greater than </p>
  
  <pre><code>var $s = $('.priceslider').slider({ 
      max: 15,
      min: 1,
      value: 2,
      slide: function(e,ui) {
        var calcprice;
        calcprice = (ui.value * pricepermonth);
        var output;
        if(value &gt; 10) {
          output = ("too much");
        } else {
          output = ("$" + calcprice + "/mo");
        }
          $('.pricingtable').html(output);
      }
    });
  </code></pre>
  
  <p>I also tried adding another div and using hide/show but, again, when I tried to put it inside the slide function, it broke the sliding ability. </p>
  
  <pre><code>var pricepermonth;
  pricepermonth = 129;
  
  $(".m2mbtn").on('click', function() {
    $(".m2mbtn").addClass('active');
    $(".annualbtn").removeClass('active');
    pricepermonth = 129;
    setPrice(pricepermonth)
    return false;
  });
  
  $(".annualbtn").on('click',  function() {
    $(".annualbtn").addClass('active');
    $(".m2mbtn").removeClass('active');
    pricepermonth = 99;
    setPrice(pricepermonth)
    return false;
  });
  
  var $s = $('.priceslider').slider({ 
      max: 15,
      min: 1,
      value: 2,
      slide: function(e,ui) {
        var calcprice;
        calcprice = (ui.value * pricepermonth);
        if (value &gt; 10) {
   $('.pricingtable').hide();
      $(".enterprisepricing").show();
    } else {
      $('.pricingtable').html("$" + calcprice + "/mo");
    }
  
      }
    });
  
  function setPrice(pricepermonth) {
    var calcprice;
    var value=$s.slider("value");
    calcprice = (value * pricepermonth);
    if (value &gt; 10) {
   $('.pricingtable').hide();
      $(".enterprisepricing").show();
    } else {
      $('.pricingtable').html("$" + calcprice + "/mo");
    }
  }
  </code></pre>