Custom Range Slider Design HTML | CSS | Javascript (Quick Tutorial)

How to re-design the default plain HTML range slider into something a little bit more modern and good looking for the eye. It takes only a few minutes and a little bit of work in Javascript. This animated tutorial shows it all in real time. If you enjoy it, and learn something new. Consider Subscribing for more content like this :)

Get The Source Code From All Of My Videos:

Check out my newest Fiverr Gig:

Follow me on Instagram:

Instagram Design Page:

My Products:

My Website:

Support Me To Keep Creating And Improving My Content:

[quickcodingtuts]

Just a small mistake I wanted to address. Inside the CSS media query the '.neu-range-slider' class should be renamed to just '.range-slider'.
You can also add the user-select: none; property on the '.range slider' to make its interactivity smoother.

[ormenodiego]

Put this js to make it work: <script>
const containers =

containers.forEach(container => {
const slider =
const thumb =
const tooltip =
const progress =

function customSlider() {
const maxVal = slider.getAttribute("max");
const val = (slider.value / maxVal) * 100 + "%";

tooltip.innerHTML = slider.value;
progress.style.width = val;
thumb.style.left = val;
}

slider.addEventListener('input', customSlider);
customSlider(); // Inicializar la posición del slider al cargar la página
});
</script>

[tournetlambertromain]

I tryied to adapt this code with react and using sass but didn't worked...
Still beautifull slider :)

[grahamgreer]

To make the slider work, simply change the selector in the javascript from .thumb to .slider-thumb.

const thumb =
should be...
const thumb =

[meaindriladas]

It's not working! Wastage of time ☹️😤