Double Range Slider | HTML, CSS, Javascript | With Source Code

Learn how you can create a dual range slider using HTML, CSS and Javascript. You can use double slider thumbs to select two values in a given range. You can even set a minimum gap between the two values.

📁 Download Source Code :

----------

⭐ Exciting coding quizzes on my website:

----------
Email:

Instagram:

----------

🎵Music:
Track: Falling Together — Artificial.Music & Syiphorous [Audio Library Release]
Music provided by Audio Library Plus

[IuliaCazan]

This is far the most useful demo I could find on how to implement a double range slider with vanilla JS. Thanks for sharing!

[alexdev]

Good tutorial. I found one bug, tho: If your slider does not start with 0, the slider will break. To fix this you need to take the minimum and maximum Value of the slider into account, when the fillColor()-method is called. For example: percent1 = / * 100;

[hernanrodriguez]

beatuful, allway working, always awesome.... hi!! nice and positive day!!!!

[xinzhiyao]

It's awesome! Thanks for sharing!

[skyora]

Found a bug where if you move both sliders to 100 you can't then move the left slider (Slider-1) left and it's stuck. I fixed it by making an if else statement where if sliderTwo and sliderOne = the sliderMaxValue then change sliderTwo to display none else display empty quotation. I add this to slideOne and slideTwo and that fixed the issue. Not sure if that's the best method but it worked for me.

Regardless of that thanks for this video it fits my needs perfectly.

[hangor]

Great tutorial, just made the version for Vue for myself based on your code!

[ОльгаЗолотарёва-гз]

This is a great instructional video, thank you so

[davidgrigoryan]

Bro, thank you so much, the only video of my task that really helped🖤

[Annak]

Oh yes that's what i was looking for! thank <3

[dorianbucknor]

This is lit... just made a react version. Thanks for the guidance💯💯💯

[yosingh]

Can we include date ranges instead on number ranges..?

[uneebnawaz]

I am changing the min and max value in input range tag but the fill colour get disturbed.. How to fix it ?

[manuelkoch]

this helped me so much thank you so much

[Pavel-wjgy]

Would be better if moving one slider would allow for pushing the other one while preserving the gap at the same time. You'd be surprised how many issues will arise.

[McDidizin]

What if I don't want him to be more than 95% away from the other?

[pacoluna]

Hi! i wanna make three of them in a single page in it give me some errors, i change the ids so every one was different but style give an error, most of it is of the css part, it looks weird. ¿somebody know why?

[uneebnawaz]

I want to change min max value of range slider.. Currently it is 0-100.. I want 40-200

[СтаниславВасильевич-ьд]

if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
sliderOne.value = parseInt(sliderTwo.value) - minGap;

}
displayValuesOne.textContent = sliderOne.value; - nothing happen