Control Jquery Range slider with slick slider

Question

I have a codepen demo, in which slick slider is moving by dragging the range slider but I want to move it when the user clicks on the next previous button also and on the slider itself. Currently, the movement is only by dragging range slider. Any help would be appreciated.

Demo link of slick slider with jquery slider

$(function() {
  var $carousel = $(".carousel");
  var slider;
  
  $carousel.slick({
    speed : 300,
    height: 200,
    arrows: true,
    slidesToShow: 2,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>'
  });
  
  slider = $( ".slider" ).slider({
    min : 0,
    max : 5,
    slide: function(event, ui) {
      var slick = $carousel.slick( "getSlick" );
      goTo = ui.value * (slick.slideCount-1) / 5;
     // console.log( goTo );
      $carousel.slick( "goTo", goTo );
    }
  });
});

.slider {
  width: 400px;
  background: black;
}
.slider .ui-slider-handle {
  display: block;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  background: red;
  cursor: pointer;
  position: relative;
}
.carousel {
  width: 400px;
  height: 200px;
  margin-left:50px;
  margin-top:50px
}
.carousel .slick-slide {
  height: 200px;
}
.carousel span {
  width: 400px;
  height: 200px;
  background:blue;
  font-size:30px
}

.slick-prev, .slick-next{
  background:green;
  width:40px;
  float:left;
  height:20px;
  position:absolute;
  left:-50px;
  top:50%
}

.slick-next{
  left:auto;
  right:-50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.js"></script>
<div class="carousel">
  <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  <span>5</span>
</div>
<div class="slider"></div>

Answer 1

To have the jQuery UI Slider update as the next and prev buttons of the Slick Carousel are clicked, hook to the afterChange event of the carousel. This property takes a function which accepts the index of the current slide as the third argument. You can apply this index as the value of the slider in order to update it.

Also note that the range of the slider should only go from 0 to 4 as there are 5 slides. Try this:

$(function() {
  var $carousel = $(".carousel");
  var $slider;

  $carousel.slick({
    speed: 300,
    height: 200,
    arrows: true,
    slidesToShow: 2,
    prevArrow: '<div class="slick-prev"><</div>',
    nextArrow: '<div class="slick-next">></div>',
  }).on('afterChange', (e, slick, slide) => {
    $slider.slider('value', slide);
  });

  $slider = $(".slider").slider({
    min: 0,
    max: 4,
    slide: function(event, ui) {
      var slick = $carousel.slick("getSlick");
      goTo = ui.value * (slick.slideCount - 1) / 4;
      $carousel.slick("goTo", goTo);
    }
  });
});

.slider {
  width: 400px;
  background: black;
}

.slider .ui-slider-handle {
  display: block;
  width: 40px;
  height: 20px;
  margin-left: -20px;
  background: red;
  cursor: pointer;
  position: relative;
}

.carousel {
  width: 400px;
  height: 60px;
  margin-left: 50px;
  margin-top: 50px
}

.carousel .slick-slide {
  height: 50px;
}

.carousel span {
  width: 400px;
  height: 200px;
  background: blue;
  font-size: 30px
}

.slick-prev,
.slick-next {
  background: green;
  width: 40px;
  float: left;
  height: 20px;
  position: absolute;
  left: -50px;
  top: 50%
}

.slick-next {
  left: auto;
  right: -50px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.js"></script>
<div class="carousel">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>
<div class="slider"></div>