Q&A
前提・実現したいこと
slickのスライド切替えをレンジスライダ―（スライダ―バー）で実装したい
初めての質問です。 カルーセルスライダ―プラグイン【slick】のスライド切替えを 左右の矢印だけでなく、 レンジスライダ―（スライダ―バー）でも実装したいと思っております。 大まかな実装はできたのですが、（ボタンの位置などデザイン的な部分はご容赦ください） slickの矢印にあたる「Previous」「next」ボタンを押しても、 スライドは切り替わるのですが、 レンジスライダ―のツマミが動かず、連動しません。 こちら、矢印とレンジスライダ―を連動させることは可能でしょうか？ よろしくお願いいたします。
該当のソースコード
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" type="text/css" media="all" /> <script src="//code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script> <script src="//rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <style> .p-goto { padding: 30px 0; } .p-goto__ttl { color: teal; font-size: 32px; font-weight: bold; text-align: center; } .p-goto-slider .slick-list { padding: 0 9.4%; } .p-goto-slider__item { background: #e3e3e3; height: 80px; margin-right: 15px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 400px; } .p-goto-slider__item:focus { outline: none; } .p-goto-slider__no { align-items: center; color: #999; display: flex; font-size: 24px; font-weight: bold; height: 100%; justify-content: center; width: 100%; } </style> <script> //slick $(function () { const option = { lazyLoad: 'ondemand', dots: false, arrows: true, centerMode: true, slidesToShow: 1, infinite: false, } const slickGoTo = $('.js-slickGoTo'); let navList = $('.js-navList'); slickGoTo.slick(option); var $document = $(document), selector = '[data-rangeslider]', $element = $(selector); function valueOutput(element) { var value = element.value, output = element.parentNode.getElementsByTagName('output')[0]; output.innerHTML = value; slickGoTo.slick("slickGoTo", output.innerHTML - 1, false); } for (var i = $element.length - 1; i >= 0; i--) { valueOutput($element[i]); }; $document.on('change', 'input[type="range"]', function (e) { valueOutput(e.target); }); $element.rangeslider({ polyfill: false, onInit: function () { }, onSlide: function (position, value) { console.log('onSlide'); console.log('position: ' + position, 'value: ' + value); }, onSlideEnd: function (position, value) { console.log('onSlideEnd'); console.log('position: ' + position, 'value: ' + value); } }); }); </script> </head> <body ontouchstart> <section class="p-goto"> <div class="p-goto-slider"> <ul class="p-goto-slider__items js-slickGoTo"> <li class="p-goto-slider__item"><span class="p-goto-slider__no">1</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">2</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">3</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">4</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">5</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">6</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">7</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">8</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">9</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">10</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">11</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">12</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">13</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">14</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">15</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">16</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">17</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">18</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">19</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">20</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">21</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">22</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">23</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">24</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">25</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">26</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">27</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">28</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">29</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">30</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">31</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">32</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">33</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">34</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">35</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">36</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">37</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">38</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">39</span></li> <li class="p-goto-slider__item"><span class="p-goto-slider__no">40</span></li> </ul><!-- /.p-goto-slider__items --> </div><!-- /.p-goto-slider --> </section><!-- /.p-goto --> <input type="range" min="1" max="40" data-rangeslider> <output></output> </body> </html>
試したこと
スライダ―のつまみを動的に移動できればいいと思うのですが、
中々うまくいきません。。
（最悪、slickでなくとも別のスライダ―プラグインや、
別のレンジスライダ―でも構わないと考えています。）
補足情報（FW/ツールのバージョンなど）
レンジスライダ―の左下の数字が現在のスライドの枚数になります。（ソース）
jQuery v3.6.0
rangeslider.js v0.3.5
あなたの回答
tips
プレビュー
