Updating text with jquery ui slider

Question

I'm using the jquery ui slider to display values next to text, but I need the text to update between singular and plural depending on the value of the slider. At the moment the text is static, so it may display "1 Bathrooms" instead of "1 Bathroom". Is there anyway I can replace this text depending on the slider's value?

I was able to accomplish it with this switch statement, but it breaks the layout of my page for some reason and it requires me to declare a case for EVERY value. Switch statement is below and original untouched code is further down:

  $( ".bedSlider" ).on( "slide", function( event, ui ){

    switch (ui.values[0]) {
      case 0:
         $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom');
         break;
      case 1:
         $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom');
         break;
      case 2:
        $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms');
        break;
      case 3:
        $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms');
        break;   
      case 4:
        $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedrooms');
        break; 
    }

    switch (ui.values[1]) {
      case 0:
         $( ".bed2" ).replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedroom');
         break;
      case 1:
         $( ".bed2" ).replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedroom');
         break;
      case 2:
        $( ".bed2" ).replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms');
        break;
      case 3:
        $( ".bed2" ).replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms');
        break;   
      case 4:
        $( ".bed2" ).replaceWith('<div class="bed2 left-search">' + ui.values[1] + ' Bedrooms');
        break; 
    }

  });

Original

  $( ".bedSlider" ).slider({
    range: true,
    min: 0,
    max: 5,
    values: [ 1, 4 ],
  });

  $( ".bedSlider" ).on( "slide", function( event, ui ){
    $( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom');
    $( ".bed2" ).replaceWith('<div class="bed2 right-search">' + ui.values[1] + ' Bedrooms');
  });

HTML

        <div class="slider-options clearfix">
            <div class="bed1 left-search"><span>1 Bedroom</span></div>
            <div class="bed2 right-search"><span>4 Bedrooms</span></div>
        </div>

        <div class="slide-bg">
        <div class="slide-wrap bedSlider"></div>
        </div>

Answer 1

Maybe something like this:

$( ".bed1" ).replaceWith('<div class="bed1 left-search">' + ui.values[0] + ' Bedroom' + (ui.values[0] == 1 ? '' : 's'));
$( ".bed2" ).replaceWith('<div class="bed2 right-search">' + ui.values[1] + ' Bedroom'  + (ui.values[1] == 1 ? '' : 's'));