Control Jquery Range slider with slick slider

user_1320281 0
Viewed 1753

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>

slick.js jquery-ui jquery
1 Answers

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>

Note that I only adjusted the sizing of the carousel in the demo to make the content fit in the snippet better. You don't need to amend the CSS in your production version.

user_5194130
Related