45+ CSS Range Sliders

Top compilation of 45+ HTML and CSS range slider code examples. Each item is 100% free, customizable, adds depth and dimension, improves readability, and maintains visual hierarchy.

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