richard.foster

OMG, you're absolutely right! thank you so much

Thanks for all of the feedback and advice Rodrigo, I genuinely appreciate it. After a lot of head-desking, I went back through some of my earlier sources and found a troublesome snippet of jQuery code that I had previously overlooked, and have so far been unable to convert to pure JS - even with the help of sites like http://youmightnotneedjquery.com/ The code in question looks like this: var $slider = $("#slider") $slider.outerWidth(sliderWidth) sliderWidth is the total width of the scrollable area (i.e. the number of slides * the width of a single slide). When I console.log '$slider.outerWidth(sliderWidth)' it returns a jQuery object (fn.init) rather than a value, which is what I would have expected. Without that code, the main slider will not function correctly, and it's rather frustrating. I have updated my codepen to reflect the changes, and re-linked below for clarity: https://codepen.io/clownjuice/pen/vMVOYR While it's great this now 'works' it would be awesome to be able to pull the jQuery code out, but as yet I'm unsure how.

Hi Rodrigo, Firstly thanks for the welcome and your fast response, both are appreciated. I had a feeling the different draggable types (x, and scrollLeft) would be an issue, but I guess the method to my madness was due to setting both draggable items to the same type resulted in 1 of them not functioning correctly. So if both are set to scollLeft then the scrubber handle will no longer update it's position while dragging it, and if both are set to x then the slides won't snap to a new position while dragging them. I've also had a tinker with the update() method and implemented what appears to be a working instance, though I can't say I see a difference in the outcome however this is most likely due to the above issue. I've also tweaked some of the css as I have a feeling something in there is tripping this up, but alas I'm yet to stumble on the solution. I have updated a new codepen with my changes in case someone is able to spot my mistake(s). https://codepen.io/clownjuice/pen/vMVOYR

Hi, I've been experimenting a bit with Draggable within the VueJS framework, and I've got a slider example mostly working - however I'm seeing a weird bug where the slide/scrubber handle position resets if I switch between control methods. So by that I mean, if I click and drag the main screen area to slide a couple of screens across and then use the handle/scrubber to continue sliding, the position of the slide 'card' resets or is no longer moving in sync with the scrubber. The same happens if I start scrolling the scrubber and then shift to click/drag the main screen. I've spent a number of days slowly pulling out what hair I have left, and for some reason I just can't see the issue. Maybe someone with fresh eyes can throw some light on my predicament? Apologies if there are any 'obvious' errors with the codepen example, it took a bit of wrangling to convert my SPC so it may not be perfect, but it shows the majority of my code and displays the issue I'm currently seeing. Any advice would be greatly appreciated.