使用平滑滑块控制Jquery范围滑块

我有一个codepen演示，其中slick滑块通过拖动范围滑块移动，但我想在用户单击下一个上一个按钮以及滑块本身时移动它。当前，仅通过拖动范围滑块进行移动。任何帮助都将不胜感激

$（函数（）{
变量$carousel=$（“.carousel”）；
var滑块；
$carousel.slick({
速度:300,，
身高：200，
箭头：是的，
幻灯片放映：2，
前箭头：“”
});
滑块=$（“.slider”）.slider({
分:0,，
最高：5，
幻灯片：功能（事件、用户界面）{
var slick=$carousel.slick（“getSlick”）；
goTo=ui.value*（滑溜滑计数-1）/5；
//console.log（goTo）；
$carousel.slick（“goTo”，goTo）；
}
});
});
滑块{
宽度：400px；
背景：黑色；
}
.slider.ui滑块句柄{
显示：块；
宽度：40px；
高度：20px；
左边距：-20px；
背景：红色；
光标：指针；
位置：相对位置；
}
旋转木马{
宽度：400px；
高度：200px；
左边距：50像素；
利润上限：50像素
}
.旋转木马.光滑滑梯{
高度：200px；
}
.旋转木马跨度{
宽度：400px；
高度：200px；
背景：蓝色；
字体大小：30px
}
.滑溜上一个，.滑溜下一个{
背景：绿色；
宽度：40px；
浮动：左；
高度：20px；
位置：绝对位置；
左：-50px；
最高：50%
}
.下一个{
左：自动；
右：-50px；
}

1.
2.
3.
4.
5.
要在单击滑动传送带的“下一个”和“上一个”按钮时更新jQuery UI滑块，请钩住传送带的“更改后

事件”。此属性接受一个函数，该函数接受当前幻灯片的索引作为第三个参数。您可以将此索引应用为滑块的值，以便更新它

还请注意，滑块的范围应仅从

0

到

4

，因为共有5个滑块。试试这个：

$（函数（）{
变量$carousel=$（“.carousel”）；
var$滑块；
$carousel.slick({
速度:300,，
身高：200，
箭头：是的，
幻灯片放映：2，
前箭头：“”，
}).on（'后更换'，（e，光滑，滑动）=>{
$slider.slider（'value'，slide）；
});
$slider=$（“.slider”）.slider({
分:0,，
最高：4，
幻灯片：功能（事件、用户界面）{
var slick=$carousel.slick（“getSlick”）；
goTo=ui.value*（slick.slideCount-1）/4；
$carousel.slick（“goTo”，goTo）；
}
});
});
滑块{
宽度：400px；
背景：黑色；
}
.slider.ui滑块句柄{
显示：块；
宽度：40px；
高度：20px；
左边距：-20px；
背景：红色；
光标：指针；
位置：相对位置；
}
旋转木马{
宽度：400px；
高度：60px；
左边距：50像素；
利润上限：50像素
}
.旋转木马.光滑滑梯{
高度：50px；
}
.旋转木马跨度{
宽度：400px；
高度：200px；
背景：蓝色；
字体大小：30px
}
.slick prev，
.下一个{
背景：绿色；
宽度：40px；
浮动：左；
高度：20px；
位置：绝对位置；
左：-50px；
最高：50%
}
.下一个{
左：自动；
右：-50px；
}

1.
2.
3.
4.
5.
谢谢您的帮助。它起作用了