Vanilla JavaScript: Create A Draggable Slider 

grid-template-columns: repeat(7, 1fr); bro, first number is solution

Your selector returns null. It means that your getElementById / querySelector doesn't find the element, probably because you make a typo.

a bit late you may have find the solution already, for me i had to use the touch event for mobile device.

@@iamflo_m hello, can you provide your source code through a gist or a codepen? Thank you!

@@alexradu1921 yes sure, the css may be different from the video, but the touch is working. github.com/florentmolle/slider-touch.git

@@iamflo_m thank you so much

@@alexradu1921 you're welcome

Awesome thanks for sharing!

awesome!

yeah, that's it, I found it by very search & practice!! how about you?

Also if you have more than one slides, you can use loops like for, foreach.

Hero!

Hi Alana. Do you have your code in code pen? Let me know and I’ll take a look.

@@ConorBailey i have the same problem at the same time, can you please help me solve this?

@@blerdijankoliqi3994 sure mate. Can you post your code on codepen? What errors are you receiving?

@@ConorBailey silly me.. the problem was that I wrote another word different from your code.. took me 30min to figure out the problem. Anyway, thank you for your reply!

@@blerdijankoliqi3994 nice one mate. Glad you got it working 👍

You're welcome :D

Hey try this one. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LPBGK1gqXoU.html Works on all devices.

@@ConorBailey Thank you!

ended up fixing this by changing the mousemove listener to the window rather than the slider- window.addEventListener('mousemove', ...

Hi Tiltify. To be honest this video may overcomplicate things. Try this video. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LPBGK1gqXoU.html It creates the same slider with less code and is also more device friendly.

@@ConorBailey wow thanks for replying, my code works, but there's just one tiny weeny bit problem When I drag the slider for the first time, it drags just fine. But when I drag it the second time, or more times it drags from the original position. Meaning when I drag it for the second time, It drags again from the middle of the inner div also I checked out the other video( just what I need) , thanks for the link ;)

@@ConorBailey subscribed :)

@@ConorBailey nevermind problem has been solved with this code slider.addEventListener('mousemove', (e) => { if(!pressed) return; e.preventDefault(); dragPosition = e.offsetX; let currentLeft = parseInt(window.getComputedStyle(slider).getPropertyValue('--lalala')); slider.style.setProperty('--lalala', currentLeft + (dragPosition - startPosition)) // this part being the one I changed, I wonder why the other one wasn't working

hey thanks for watching. No i didn't.

@@ConorBailey hey, thank you for answer, it looked almost like wesbos code, he had same kind of project in his 30 days 30 projects series, that's way I asked, but now I checked it closely and your code is different and looks original, sorry about my unthought comment ...

BWT when you are calculating startX by substracting innerSlider.offsetLeft to e.offsetX , instead you can just write startX = e.clientX and then in mousemove function x = e.clientX also, and substracting those two gives length in pixels in which mouse traveled from mouse down to mouse move. OR second version is that you also can use offsetX instead of clientX : startX = offsetX -> x = offsetX and innerSlider.style.left = (x - startX) . So basically innerSlider.offsetLeft is not needed here, but in this case it is always equals to 0 anyways and it doesn't make any noticeable difference. But in the case where inerSlider is positiond inside the slider such that left position is grater then 0 than it will give you slight error in calculation.

this is not the way to thank him (...)