Change output of slider if value is greater than a certain number

Question

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: http://codepen.io/redbranchmedia/pen/jEEqEw

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

var $s = $('.priceslider').slider({ 
    max: 15,
    min: 1,
    value: 2,
    slide: function(e,ui) {
      var calcprice;
      calcprice = (ui.value * pricepermonth);
      var output;
      if(value > 10) {
        output = ("too much");
      } else {
        output = ("$" + calcprice + "/mo");
      }
        $('.pricingtable').html(output);
    }
  });

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.

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 > 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 > 10) {
 $('.pricingtable').hide();
    $(".enterprisepricing").show();
  } else {
    $('.pricingtable').html("$" + calcprice + "/mo");
  }
}

Answer 1

How about this :

var $s = $('.priceslider').slider({ 
max: 15,
min: 1,
value: 2,
slide: function(e,ui) {
  var calcprice;
  calcprice = (ui.value * pricepermonth);
  var output;
  if(ui.value > 10) {
    output = ("too much");
  } else {
    output = ("$" + calcprice + "/mo");
  }
    $('.pricingtable').html(output);
}
});

The value in the if statement is undefined.

Answer 2

Instead of using

if(value > 10)

you should use

if(ui.value > 10)

That will get the current value of your slider.

If you are looking for a way to wait until the user clicks a button to show that the value is too much then you can use a global variable that gets updated every time the user changes the slider.

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

      currentSliderPosition = ui.value;

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

    }
});

...

$('someButton').click(function(){
    if(currentSliderPosition > 10){
        $('.pricingtable').html("TOO MUCH");
    }
});