Обновление текста с помощью слайдера jquery ui

Я использую ползунок jquery ui для отображения значений рядом с текстом, но мне нужен текст для обновления между сингулярным и множественным числом в зависимости от значения ползунка. На данный момент текст статичен, поэтому он может отображать "1 Ванные комнаты" вместо "1 Ванная комната". В любом случае я могу заменить этот текст в зависимости от значения ползунка?

Я смог выполнить это с помощью этого оператора switch, но по какой-то причине он нарушает макет моей страницы, и мне требуется объявить случай для КАЖДОГО значения. Оператор switch ниже, а оригинальный нетронутый код еще ниже:

  $( ".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; 
    }

  });

оригинал

  $( ".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>