js 슬릭슬라이더 스크롤바

 - input type=range 로 만드는 것

- dots: true,

 

<ul class="슬라이더">
	<li>cont</li>
    <li>cont</li>
    <li>cont</li>
    <li>cont</li>
</ul>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"><span class="slider__label forSR"></div>

 

 const IndexEquip = $('#index .facIntro .equip ul, #overview .history article > ul');
  const IndexEquipPro = $('#index .facIntro .equip .progress, #overview .history article .progress');
  
  IndexEquip.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
    let calc = ( (nextSlide) / (slick.slideCount - 1) ) * 100;
    
    IndexEquipPro
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc );
    
  });

  IndexEquip.on('wheel', function(e) { //마우스휠
    e.preventDefault();

    if (e.originalEvent.deltaY < 0) {
      $(this).slick('slickPrev');
    } else {
      $(this).slick('slickNext');
    }
  });
  
  IndexEquip.slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    speed: 400,
    arrows: false,
    swipeToSlide: true,
    focusOnSelect: true,
    autoplay: true,
    autoplaySpeed: 2000,
    dots: true,
    responsive: [
      {
        breakpoint: 769,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        }
      },
    ]
  });  

const dots = $('.slick-dots');
const scrollbar = "slick-scrollbar";

슬라이더.each(function(){
const slides = dots.find('li').length - 1; 
const scroll = `<div class="${scrollbar}"><input type="range" min="0" max="${slides}" step="0.01"value="0" /></div>`;

$(scroll).insertAfter(dots);

})

$('body').on('input', 슬라이더.find("." + scrollbar), function(){

let current = Math.round($(this).find('input').val());
슬라이더.slick('slickGoTo', current);  

});

슬라이더.on('beforeChange', function(event, slick, currentSlide, nextSlide){
	if( $("." + scrollbar + " input").is(":focus") ){

}else{
  $(this).find("." + scrollbar + " input").val(nextSlide);	
}
});

.slick-dots{display: none !important;}
.slick-scrollbar{margin-top: 144px;}
.slick-scrollbar input[type=range]{-webkit-appearance: none; width: 100%; height: 10px; border-radius: 10px; background-color: #fff; box-shadow: inset 0px 3px 6px #00000029;}
.slick-scrollbar input[type=range]:focus {outline: none;}
.slick-scrollbar input[type="range"]::-webkit-slider-thumb{height: 10px; background: var(--main); width: 10%; border-radius: 10px; cursor: grab; -webkit-appearance: none;}