Creating a Draggable Slider (HTML, CSS, JS)

I have become more and more fascinated with JS and how it can interact with HTML and CSS, the amount of different things you can build are amazing. I decided to build a feature I enjoy seeing is a draggable slider. Looking up many resources to see an easy and understandable way to implement this feature I built from scratch in Vanilla JS with HTML and CSS.

I started with building my file structure. I hard-coded the index.html file with the images that I stored in src/imgs. Looking at the web page after starting my server, the images took up the entire window and I realized everything needed to resized. I created a styles.css file in the src folder, and added the link to the file in the index.html.

<link rel=”stylesheet” href=”src/styles.css” />

Then I was able to build out the css file and resize the images and create borders. Using three different classes of container, cards, and card, I was able to separate out each class and manipulate each portion of the DOM.

Once the HTML and CSS files were set, I could start writing the JS functionality into the project. First I declared the elements I wanted to manipulate using JS, that would be the container and cards classes, using document query selector.

const container = document.querySelector('.container')
const cards = document.querySelector('.cards')

Adding event listeners allowed the page to detect if the mouse would move up and down. Also implementing a ‘grab’ and ‘grabbing’ feature to see the cursor actions when interacting with page was part of the event listeners:

container.addEventListener('mousedown', (event) => {
isPressedDown = true;
cursorXSpace = event.offsetX - cards.offsetLeft;
container.style.cursor = 'grabbing'
});
container.addEventListener('mouseup', () => {
container.style.cursor = 'grab'
})
window.addEventListener('mouseup', () => {
isPressedDown = false
})
container.addEventListener('mousemove', (event) => {
if(!isPressedDown) return;
event.preventDefault();
cards.style.left = `${event.offsetX - cursorXSpace}px`;
boundcards()
});

Now was the time to put on the finishing touches and create a function to have the page know where the cursor position was. This was vital so the user could not move too far left or too far right. Since the cards class position was absolute, I could write this function using JS rect() functions, which will detect the top, bottom, left, right position on the page. Using it with an ‘if’ and ‘else if’ statement it would prevent the user to move beyond the cards on the left and right sides of the page.

function boundcards() {
const container_rect = container.getBoundingClientRect()
const cards_rect = cards.getBoundingClientRect()
if(parseInt(cards.style.left) > 0) {
cards.style.left = 0
} else if (cards_rect.right < container_rect.right) {
cards.style.left = `-${cards_rect.width — container_rect.width}px`
}
}

The page is working properly and I finished it by adding a little border coloring.

This was the first project I have done of this feature, and I will continue to develop this skill to implement into bigger projects.