45+ CSS Range Sliders

Are you looking for interactive range sliders that exponentially uplift your site’s user experience? Seek no further! In this collection, we are featuring top 45+ HTML and CSS range slider code examples that demonstrate the true power of CSS. Range sliders allow users to set numeric values from a specified range by dragging a handle along a horizontal or vertical track.

Whether you’re a web designer or developer, our curated compilation of CSS range sliders is perfect to add a touch of magic and personality to your web pages. Each range slider has a mesmerising appeal, making range selection stand out and drawing attention from your users.

Each item is highly customizable, making it easy to change the colour, style, and appearance of the range slider UI component. Our hand-picked collection offers a wide array of range slider code snippets, enhancing the user experience and improve the user satisfaction.

Let’s discover these visually stunning free CSS range sliders and give a solid foundation to your web projects.

1. Custom Web Component – Range Slider

See the Pen <a href="https://codepen.io/goodbits/pen/JjXomPJ"> Custom Web Component – Range Slider</a> by good_bits (<a href="https://codepen.io/goodbits">@goodbits</a>) on <a href="https://codepen.io">CodePen</a>.

Author: good_bits
Source: Code / Demo
Created on: AUGUST 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

2. SVG Bubble Slider

See the Pen <a href="https://codepen.io/chrisgannon/pen/GZNgLw"> SVG Bubble Slider</a> by Chris Gannon (<a href="https://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Gannon
Source: Code / Demo
Created on: MARCH 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. Range slider

See the Pen <a href="https://codepen.io/Magura/pen/WNNgNjR"> Range slider</a> by Magura (<a href="https://codepen.io/Magura">@Magura</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Magura
Source: Code / Demo
Created on: NOVEMBER 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus), JavaScript

4. Range slider with text

See the Pen <a href="https://codepen.io/angelchen-design/pen/bGVedjJ"> Range slider with text</a> by Angel (<a href="https://codepen.io/angelchen-design">@angelchen-design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Angel
Source: Code / Demo
Created on: APRIL 18, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Stylus), JavaScript

5. Price Range Input

See the Pen <a href="https://codepen.io/CPboiboi/pen/BaydEBP"> Price Range Input</a> by CPboiboi (<a href="https://codepen.io/CPboiboi">@CPboiboi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CPboiboi
Source: Code / Demo
Created on: DECEMBER 30, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Color-Changing Gauge Text

See the Pen <a href="https://codepen.io/collinsworth/pen/ZEEmgBv"> Color-Changing Gauge Text</a> by Josh Collinsworth (<a href="https://codepen.io/collinsworth">@collinsworth</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Josh Collinsworth
Source: Code / Demo
Created on: NOVEMBER 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. Input range exponential box sizing

See the Pen <a href="https://codepen.io/CPboiboi/pen/GRRbKOa"> Input range exponential box sizing</a> by CPboiboi (<a href="https://codepen.io/CPboiboi">@CPboiboi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CPboiboi
Source: Code / Demo
Created on: NOVEMBER 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Price slider

See the Pen <a href="https://codepen.io/BogdanovB/pen/bGppJGd"> Price slider (UiSlider)</a> by Bogdan (<a href="https://codepen.io/BogdanovB">@BogdanovB</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bogdan
Source: Code / Demo
Created on: AUGUST 16, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. Isotope Combination Filters with Range Sliders

See the Pen <a href="https://codepen.io/lifeonlars/pen/yaaOey"> Isotope Combination Filters with Range Sliders</a> by Lars Farstad (<a href="https://codepen.io/lifeonlars">@lifeonlars</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lars Farstad
Source: Code / Demo
Created on: SEPTEMBER 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

10. Rubber Slider

See the Pen <a href="https://codepen.io/aaroniker/pen/pojqqXK"> Rubber Slider v2</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: MAY 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

11. Glitchy Elastic Slider

See the Pen <a href="https://codepen.io/ClementRoche/pen/xmerjZ"> glitchy elastic slider</a> by Clément Roche (<a href="https://codepen.io/ClementRoche">@ClementRoche</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Clément Roche
Source: Code / Demo
Created on: JANUARY 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

12. Styled native range input

See the Pen <a href="https://codepen.io/thebabydino/pen/PwOPMG"> Styled native range input #3 (updated 2020)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: FEBRUARY 5, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS), JavaScript

13. Input range dance

See the Pen <a href="https://codepen.io/Mamboleoo/pen/oNbzKez"> Input range dance</a> by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Louis Hoebregts
Source: Code / Demo
Created on: JUNE 17, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

14. Flat Range Sliders

See the Pen <a href="https://codepen.io/the_ruther4d/pen/ndRmBd"> Flat Range Sliders</a> by Rosh Jutherford (<a href="https://codepen.io/the_ruther4d">@the_ruther4d</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rosh Jutherford
Source: Code / Demo
Created on: JULY 6, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Custom Range Slider 3 – HTML + CSS + JS

See the Pen <a href="https://codepen.io/MinzCode/pen/bGEvXWR"> Custom Range Slider 3 – HTML + CSS + JS</a> by MinzCode (<a href="https://codepen.io/MinzCode">@MinzCode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MinzCode
Source: Code / Demo
Created on: JULY 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. CSS Heat Map Slider Input

See the Pen <a href="https://codepen.io/jasesmith/pen/wvzRYvV"> CSS Heat Map Slider Input — v.2</a> by Jase (<a href="https://codepen.io/jasesmith">@jasesmith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jase
Source: Code / Demo
Created on: JANUARY 16, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

17. Verly Range Slider

See the Pen <a href="https://codepen.io/anuraghazra/pen/agKJEd"> Verly Range Slider</a> by Anurag (<a href="https://codepen.io/anuraghazra">@anuraghazra</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anurag
Source: Code / Demo
Created on: JULY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Range Sliders With a Rolling Counter

See the Pen <a href="https://codepen.io/jkantner/pen/yLYZwjY"> Range Sliders With a Rolling Counter</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: MAY 22, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. Unicycle Range Slider

See the Pen <a href="https://codepen.io/jkantner/pen/wvarNEp"> Unicycle Range Slider</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: MARCH 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

20. Range Input

See the Pen <a href="https://codepen.io/dsr/pen/rNLxBxw"> Range Input</a> by Darshan Rajadhyaksha (<a href="https://codepen.io/dsr">@dsr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Darshan Rajadhyaksha
Source: Code / Demo
Created on: OCTOBER 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. Flat Range Sliders

See the Pen <a href="https://codepen.io/qkevinto/pen/KzxMdj"> Flat Range Sliders</a> by Kevin (<a href="https://codepen.io/qkevinto">@qkevinto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin
Source: Code / Demo
Created on: APRIL 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

22. Neumorphic Ranges With a Ball Handle

See the Pen <a href="https://codepen.io/jkantner/pen/qBbWjaJ"> Neumorphic Ranges With a Ball Handle</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: JUNE 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

23. Vertical input range cross-browser supported

See the Pen <a href="https://codepen.io/kunukn/pen/pgqvpQ"> Vertical input range cross-browser supported</a> by Kunuk Nykjær (<a href="https://codepen.io/kunukn">@kunukn</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kunuk Nykjær
Source: Code / Demo
Created on: FEBRUARY 10, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript (Babel)

24. Range Slider

See the Pen <a href="https://codepen.io/m-boichuk/pen/MWjJLEa"> Range Slider</a> by Mykola Boichuk (<a href="https://codepen.io/m-boichuk">@m-boichuk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mykola Boychuk
Source: Code / Demo
Created on: DECEMBER 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

25. Multi Handle Slider – final result

See the Pen <a href="https://codepen.io/thebabydino/pen/rNaLarx"> multi handle slider – flat #4: final result</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: DECEMBER 12, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS), JavaScript (Babel)

26. range slider brightness – darkcode

See the Pen <a href="https://codepen.io/ruuuff/pen/qBOryWB"> range slider brightness – darkcode</a> by RuuuFF (<a href="https://codepen.io/ruuuff">@ruuuff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: RuuuFF
Source: Code / Demo
Created on: APRIL 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

27. Scalable 3D Range Sliders

See the Pen <a href="https://codepen.io/zephyo/pen/MZbLwV"> Day 5: Scalable 3D Range Sliders</a> by Angela He (<a href="https://codepen.io/zephyo">@zephyo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Angela He
Source: Code / Demo
Created on: DECEMBER 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

28. color slider

See the Pen <a href="https://codepen.io/_rn1873/pen/qBbNvLd"> color slider</a> by Rabbi🐰 (<a href="https://codepen.io/_rn1873">@_rn1873</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rabbi
Source: Code / Demo
Created on: JUNE 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

29. Range Slider + image & content change when slide

See the Pen <a href="https://codepen.io/tanzyingsz/pen/xxZBBmy"> Range Slider + image&content change when slide</a> by Tanzyingsz (<a href="https://codepen.io/tanzyingsz">@tanzyingsz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tanzyingsz
Source: Code / Demo
Created on: JULY 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

30. Multi Range Slider

See the Pen <a href="https://codepen.io/vsync/pen/MpVbNj"> Multi Range Slider</a> by Yair Even Or (<a href="https://codepen.io/vsync">@vsync</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yair Even Or
Source: Code / Demo
Created on: MARCH 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS), JavaScript

31. Multi Handle Slider

See the Pen <a href="https://codepen.io/thebabydino/pen/BayLZvp"> multi handle slider – realistic #8: final result</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: DECEMBER 14, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS), JavaScript (Babel)

32. Gooey Range Input

See the Pen <a href="https://codepen.io/kparzecki/pen/VwepwPG"> Gooey range input</a> by Kacper Parzęcki (<a href="https://codepen.io/kparzecki">@kparzecki</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kacper Parzęcki
Source: Code / Demo
Created on: JUNE 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS), JavaScript

33. Styled native range input

See the Pen <a href="https://codepen.io/thebabydino/pen/YPEqVY"> Styled native range input #6 (updated 2020)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ana Tudor
Source: Code / Demo
Created on: FEBRUARY 5, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS), JavaScript

34. Wavy Numbers Gauge • motiontricks.com

See the Pen <a href="https://codepen.io/PointC/pen/zYrjoLq"> Wavy Numbers Gauge • motiontricks.com</a> by Craig Roblewsky (<a href="https://codepen.io/PointC">@PointC</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Craig Roblewsky
Source: Code / Demo
Created on: JULY 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

35. Custom range input with snapping values made with GSAP Draggable

See the Pen <a href="https://codepen.io/akex-jester/pen/zYqRKBN"> Custom range input with snapping values made with GSAP Draggable</a> by ｊｅｓｔｅｒ (<a href="https://codepen.io/akex-jester">@akex-jester</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ｊｅｓｔｅｒ
Source: Code / Demo
Created on: SEPTEMBER 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

36. Love Slider

See the Pen <a href="https://codepen.io/chrisgannon/pen/XWKvBRo"> Love Slider</a> by Chris Gannon (<a href="https://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Gannon
Source: Code / Demo
Created on: NOVEMBER 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. Basic jQuery UI Range Sliders

See the Pen <a href="https://codepen.io/mprestonise/pen/jOXEpM"> Basic jQuery UI Range Sliders</a> by Michael Prestonise (<a href="https://codepen.io/mprestonise">@mprestonise</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Prestonise
Source: Code / Demo
Created on: SEPTEMBER 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

38. Multi-range slider

See the Pen <a href="https://codepen.io/kme211/pen/yXdxXy"> Multi-range slider</a> by Keari Eggers (<a href="https://codepen.io/kme211">@kme211</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keari Eggers
Source: Code / Demo
Created on: JULY 19, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Stylus), JavaScript(Babel)

39. Longcat Range Sliders

See the Pen <a href="https://codepen.io/jkantner/pen/RwGbByW"> Longcat Range Sliders</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: NOVEMBER 25, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

40. Range Slider

See the Pen <a href="https://codepen.io/KeithPaul/pen/wvaNopW"> Range Slider </a> by Keith (<a href="https://codepen.io/KeithPaul">@KeithPaul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Keith
Source: Code / Demo
Created on: MARCH 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

41. Interest Rate Calculator

See the Pen <a href="https://codepen.io/JayPea21/pen/abagdJ"> Interest Rate Calculator</a> by Joe Pease (<a href="https://codepen.io/JayPea21">@JayPea21</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joe Pease
Source: Code / Demo
Created on: SEPTEMBER 9, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

42. Range Slider w GSAP

See the Pen <a href="https://codepen.io/kdbkapsere/pen/dyyLoxo"> Range Slider w GSAP </a> by Kasper De Bruyne (<a href="https://codepen.io/kdbkapsere">@kdbkapsere</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kasper De Bruyne
Source: Code / Demo
Created on: NOVEMBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript (Babel)

43. Slider with fill and configurable tick marks

See the Pen <a href="https://codepen.io/viestursm/pen/BayEjaN"> Slider with fill and configurable tick marks</a> by Viesturs Marnauza (<a href="https://codepen.io/viestursm">@viestursm</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Viesturs Marnauza
Source: Code / Demo
Created on: JANUARY 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

44. Range Slider

See the Pen <a href="https://codepen.io/jkantner/pen/abOqGwB"> Rage Slider 💢</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: MARCH 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

45. HTML5 Range Sliders

See the Pen <a href="https://codepen.io/clintabrown/pen/kNgMdW"> HTML5 Range Sliders</a> by Clint Brown (<a href="https://codepen.io/clintabrown">@clintabrown</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Clint Brown
Source: Code / Demo
Created on: JULY 6, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

46. Morphing Emoji Slider

See the Pen <a href="https://codepen.io/aaroniker/pen/GRRVWvE"> Morphing Emoji Slider</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. Author: Aaron Iker
Source: Code / Demo
Created on: NOVEMBER 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript