← Back toHTML DOM

Create a range slider

Written byPhuoc Nguyen

Created

07 Apr, 2020

Last updated

16 Apr, 2020

#1. Use a `range` input

HTML provides a built-in `range` input:

html

<input type="range" />

It's supported in modern browsers, IE 10 and later. But there're some limitations such as:

You can't customize the knob
At the time of writing this, the vertical-oriented slider isn't supported in all modern browsers

Jump to the next section if you want to have a customizable slider.

Tip

Using the similar technique mentioned in this post, we can check if the `range` input is supported or not:

const isRangeInputSupported = function () {
    const ele = document.createElement('input');
    ele.setAttribute('type', 'range');
    // If the browser doesn't support the `range` input,
    // the `type` attribute will be reverted back to `text`
    return ele.type !== 'text';
};

#2. Create a customizable range slider

A slider is a combination of three parts: a knob, and two sides located at the left and right of the knob.

html

<div class="container">
    <div class="left"></div>
    <div class="knob" id="knob"></div>
    <div class="right"></div>
</div>

These parts are placed in the same row. The right element takes the available width. So, we can use the following styles to build the layout:

css

.container {
    /* Content is centered horizontally */
    align-items: center;
    display: flex;

    /* Size */
    height: 1.5rem;
}
.right {
    /* Take the remaining width */
    flex: 1;
    height: 2px;
}

You can take a look at the demo to see the full styles of elements.

Resource

This page demonstrates the simplest layout for a range slider

#Handle the events

The idea of making the knob draggable is quite simple:

Handle the knob's `mousedown` event. The handler stores the mouse position:

// Query the element
const knob = document.getElementById('knob');
const leftSide = knob.previousElementSibling;

// The current position of mouse
let x = 0;
let y = 0;
let leftWidth = 0;

// Handle the mousedown event
// that's triggered when user drags the knob
const mouseDownHandler = function (e) {
    // Get the current mouse position
    x = e.clientX;
    y = e.clientY;
    leftWidth = leftSide.getBoundingClientRect().width;

    // Attach the listeners to `document`
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

When the knob is moving, based on the current and original mouse position, we know how far the mouse has been moved. We then set the width for the left side:

const mouseMoveHandler = function (e) {
    // How far the mouse has been moved
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    const containerWidth = knob.parentNode.getBoundingClientRect().width;
    let newLeftWidth = ((leftWidth + dx) * 100) / containerWidth;
    newLeftWidth = Math.max(newLeftWidth, 0);
    newLeftWidth = Math.min(newLeftWidth, 100);

    leftSide.style.width = `${newLeftWidth}%`;
};

There're more small things that aren't listed in this post since you can see them in the demo's source. But I always recommend to cleanup everything when the handlers aren't used:

// Triggered when user drops the knob
const mouseUpHandler = function() {
    ...

    // Remove the handlers of `mousemove` and `mouseup`
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

Tip

This post uses the Attach event handlers inside other handlers tip

#See also

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn