2

I am trying to combine range slider with slick slider for drag functionality but I'm stuck with integrating it, tried manupulate the offset but slick slider resets after it changes slide again.

Here is what i have been able to do so far

    $(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();

    });

Codepen : https://codepen.io/mjn/pen/NzdpGG

MJN
  • 610
  • 1
  • 7
  • 19
  • You are actually changing the CSS `left` attribute of an element on which there is a plugin instance (Slick). That seems to works, but the plugin doesn't know about that change. I suggest you fully examine the [toolset Slick has to offer](http://kenwheeler.github.io/slick/) about **events** and **methods** to programmatically detect/change the current slide. You'll have some maths to do about the rangeslider position (in percentage) to match a slide number. I would look for the `slickGoTo` method. -- Good luck! – Louys Patrice Bessette Jun 09 '18 at 16:43
  • @Louys actually the slickGoto method i can work with but i need drag effect not just slide.. i mean slide along with knob – MJN Jun 09 '18 at 17:01
  • hello @Manjunath Did you find a solution? I'm trying to achieve the exact same effect, but I cannot seem to make it work. I was hoping you could help me out here. – Kuubs Apr 16 '20 at 12:38
  • @HuubS Unfortunately I did not. I gave up the idea as due to some reasons but i'll add to my checklist to achieve it when i get time :) – MJN Apr 16 '20 at 13:06
  • @Manjunath Thanks for the reply. I will go with the other option that is changing the slide when it reaches a certain treshold. Dragging seems to be impossible, except maybe changing the x coordinate of the transform. – Kuubs Apr 16 '20 at 19:05

1 Answers1

0

make the following change and try it will be starting from the first slide before you move the slider. function slickIt(){ $(".single-item").slick({ centerMode: false, ...

Let me know whether It got what you are looking for...

user8336233
  • 136
  • 1
  • 3