[Hovik]

Добры день всем я пытаюсь модифицировать слайдер на jquery ui все сделал осталось только выравнивания имя с ползунком, но не получается.
slep не могу трогать от нее зависеть другая функциональность. Прошу помощи заранее благодарю за ответ.

<div class="myslider2">
	<img src="slider1/1.jpg" id="flask">
	<div class="slider-labels">
		<div>
			<div class="slider-label poor active">Médiocre/passable</div>
			<div class="slider-label good">Bonne</div>
			<div class="slider-label everygood">Très bonne</div>
			<div class="slider-label ideal">Idéale</div>
			<div class="slider-label signature">Astor by Blue Nile™</div>
		</div>
	</div>
<div id="range">
	<div id="slider1">
		<div class="gich">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</div>
	<div id="text">
		<div class="text_item1">
			1numquam, quod, facere porro maxime expedita quo quae? Doloribus accusantium, iste praesentium aliquam minima necessitatibus vitae quia vero commodi quas?
		</div>
			<div class="text_item2">
		2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur nam tenetur porro expedita saepe voluptatem tempora voluptatibus? Tempore voluptatibus 
		</div>
			<div class="text_item3">
			3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus 
		</div>
			<div class="text_item4">
			4Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus 
		</div>
			<div class="text_item5">
			5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus olore libero 
		</div>
	</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
.myslider2{ 
	width: 800px;
	display: block;
	margin: 0 auto;
}

#flask{
	display: block;
    margin: 0 auto;
}

#text{
	margin-top: 20px;
}

#text div:not(:first-child){
	display: none;
}

#slider1{
     height: 18px;
background: #0024d6;
}

#slider1 > span{
	height: 30px;
	top: -10px;
	cursor: pointer;
	background: linear-gradient(0deg,#d3d3d3 0,#fff);
}
#slider1 .ui-state-focus{
	outline: none;
}

#slider1 .ui-state-active{
	border: 1px solid #cccccc;
    background: #ededed;
}


.slider-labels{
	margin: 15px auto;
    font-size: 16px;
    table-layout: fixed;
}

.slider-labels > div{
	display: flex;
	justify-content: space-between;
}

.myslider2 .slider-labels .active {
    color: #0024d6;
    font-weight: 700;
}


.gich{
	display: flex;
	justify-content: space-around;
}
.gich span{
	width: 1px;
    background-color: #fff;
    opacity: .8;
    height: 18px;
}
</style>

$(function() {
  var myImages = [
    "slider1/1.jpg",
    "slider1/2.jpg",
    "slider1/3.jpg",
    "slider1/4.jpg",
    "slider1/4.jpg",
  ];
  var myLaybers = $('.myslider2 .slider-labels .slider-label');
  $("#slider1").slider({
    min: 0,
    max: (myImages.length - 1),
    step: 1,
    value: 0.3,
    // animate: "slow",
    change: function(event, ui) {
      $('#flask').attr('src', myImages[ui.value]);
      $('#text div').css('display','none');
  	  $('#text .text_item' + (ui.value+1)).css('display','block');
  	  $(myLaybers).removeClass('active');
  	  $(myLaybers[ui.value]).addClass('active');
        console.log(ui.value)
    }
  });
});