Javascript 如何添加rangeslider.js以控制滑动条的阻力

我试图结合范围滑块与滑动滑块的拖动功能，但我坚持与它集成，试图手动填充偏移，但滑动滑块重置后，它再次改变幻灯片

以下是我到目前为止所能做的

    $(function(){

        function getSlides(){
            var slidetrack = $(".slick-track");
            var width = slidetrack[0].clientWidth;
            var slides = $(".slick-slide").length;
            var min = width/slides;
            var max = width;

            //console.log(width);
            //console.log(slides + "|" + min + "|" + max);
            var input = '<input type="range" min="'+ min +'" max="'+ max +'" value="0" step="1" data-rangeslider>';
            $(".budget").append(input);
            ranger(slidetrack,min);
        }

        function ranger(slidetrack,min){
            $('input[type="range"]').rangeslider({
                polyfill:false,
                onInit:function(){
                },
                onSlide:function(position, value){
                    slidetrack.css("left",min-value+"px");
                },
                onSlideEnd:function(position, value){
                    //console.log('onSlideEnd');
                    //console.log('position: ' + position, 'value: ' + value);
                }
            });
        }

        function slickIt(){
            $(".single-item").slick({
                centerMode: true,
              slidesToShow: 3,
              infinite:false
            });
        }
        slickIt();
        getSlides();

    });

$（函数（）{
函数getSlides（）{
var slidetrack=$（“.slick track”）；
var-width=slidetrack[0]。客户端宽度；
变量幻灯片=$（“.slick slide”）。长度；
var min=宽度/幻灯片；
var max=宽度；
//控制台。原木（宽度）；
//控制台日志（幻灯片+“|”+最小值+“|”+最大值）；
var输入=“”；
$（“.budget”）。追加（输入）；
游骑兵（滑道，分钟）；
}
功能范围器（滑动追踪，最小值）{
$（'input[type=“range”]”）。范围滑块({
polyfill:false，
onInit:function（）{
},
onSlide：函数（位置、值）{
css（“左”，最小值+px”）；
},
onslidend：函数（位置、值）{
//console.log（'onslidend'）；
//console.log（'位置：'+position，'值：'+value）；
}
});
}
函数（it）{
美元（“.single item”）.slick({
centerMode：对，
幻灯片放映：3，
无限：错
});
}
滑头（）；
getSlides（）；
});

---

Codepen:

进行以下更改并尝试，它将从第一张幻灯片开始，然后再移动滑块。 函数（it）{ 美元（“.single item”）.slick({ centerMode:false，

---

让我知道它是否得到了您想要的…

您实际上是在更改一个元素的CSS

left

属性，该元素上有一个插件实例（Slick）。这似乎可行，但插件不知道该更改。我建议您全面检查about事件和方法，以编程方式检测/更改当前幻灯片。您将对RangeSlaider位置（百分比）进行一些计算为了匹配幻灯片编号。我会寻找

slickGoTo

方法。--祝你好运！@Louys实际上是我可以使用的slickGoTo方法，但我需要拖拽效果，而不仅仅是幻灯片。我的意思是与knobhello@Manjunath一起滑动。你找到解决方案了吗？我正试图达到完全相同的效果，但我似乎无法让它工作。我希望你你可以在这里帮助我。@HuubS不幸的是我没有。由于某些原因，我放弃了这个想法，但我会在有时间的时候加入我的清单来实现它：）@Manjunath感谢您的回复。我将使用另一个选项，即在幻灯片到达某个树梢时更改幻灯片。拖动似乎是不可能的，除了可能更改变换的x坐标。这不是我想要的。我需要旋钮来控制滑块。