30+ CSS Range Sliders - Free Code + Demos
Collection of 30+ CSS Range Sliders. All items are 100% free and open-source.
1. Unicycle Range Slider
A range input where a stick figure is on a unicycle whose wheel is the handle. Watch him peddle and the flag display the value as you drag the wheel left and right! Update 5/20/20: Tried to fix responsive sizing due to criticism by the web dev media for this not being responsive. I may ha...Read More
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: March 5, 2020
Made with: HTML, CSS, JS
Tags: unicycle, range-input, form controls, lines, stick-figure
2. CSS Custom Range Slider
Author: Brandon McConnell (brandonmcconnell)
Links: Source Code / Demo
Created on: December 20, 2018
Made with: HTML, SCSS, JS
3. Slider Range Mars Weight Calculator
Author: Marine Piette (mayuMPH)
Links: Source Code / Demo
Created on: August 1, 2018
Made with: HTML, SCSS, JS
4. Cross-Browser Range Input With Solid Lower Fill
Uses a box shadow on the pseudo thumb element to create a fill within the range input. Works everywhere I've tested that supports the range input.
Author: Noah Blon (noahblon)
Links: Source Code / Demo
Created on: November 10, 2015
Made with: HTML, CSS
5. Minimal Input Range Styling (CSS Only)
Author: Renaud Tertrais (renaudtertrais)
Links: Source Code / Demo
Created on: August 21, 2015
Made with: HTML, Less, JS
Tags: flat ui css3 input minimal
6. Prettify `<input Type=range>`
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, IE 11 on Windows 8. CSS only in Firefox and IE. Very little JS needed for Chrome/ Opera. Has a couple of little nice extras in Chrome/ Opera - the ro...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 21, 2015
Made with: SCSS, JS
Tags: slider, javascript
7. Prettify <input Type=range>
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, IE 11 on Windows 8. Very little JS needed. Has a couple of little nice extras in Chrome/ Opera - shape of the thumb and the block numbering. These ar...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 19, 2015
Made with: HTML, SCSS, JS
Tags: javascript, slider
8. Prettify <input Type=range> 2
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, 29 beta, IE 11 on Windows 8. CSS-only in Firefox & IE/ not much JS needed for Chrome/ Opera. Lines don't look too good in Chrome 41/ Opera. Has a coup...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 17, 2015
Made with: HTML, SCSS, JS
Tags: javascript, slider
9. Prettify <input Type=range>
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, IE 11 on Windows 8. Has a couple of nice extras in Chrome/ Opera - displaying labels along the tracks. This is achieved by using pseudo elements on t...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 16, 2015
Made with: SCSS
Tags: slider
10. Input Type-Range
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, IE 11 on Windows 8. Very little JS needed. Has a little nice extra in Chrome/ Opera - the turn off symbol on the thumb. This s achieved by using a ps...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 15, 2015
Made with: HTML, SCSS, JS
Tags: javascript, slider
11. Cross-browser 1 Element Slider
Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 28, IE 11 on Windows 8. CSS-only in Firefox & IE/ very little JS needed for Chrome/ Opera. Has a couple of nice extras in Chrome/ Opera - displaying rule...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: March 12, 2015
Made with: SCSS, JS
Tags: javascript, slider
12. #Stylesheet# Input[type='range']__Equalizer
This is a first try of styling InputRange Element, without extraDom or JS.
Author: Long Lazuli (long-lazuli)
Links: Source Code / Demo
Created on: February 18, 2015
Made with: HTML, SCSS
Tags: css, slider, html5
13. Input Slider
You can see the rest of my 1 range input sliders in this collection. Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 35, 38 (nightly), Chrome 40, 42 (canary)/ Opera 28, IE 11 on Windows 8. IE doesn't need the JS, Firefox and Chrome/ Opera rely on it...Read More
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 15, 2015
Made with: SCSS, JS
Tags: javascript, slider
14. Customized Range Slider
Author: Chris Coyier (chriscoyier)
Links: Source Code / Demo
Created on: November 5, 2014
Made with: HTML, CSS
15. Range Input: Change Live Value
Live change the value of the range input using JavaScript's 'input' addEventListener
Author: Jorge Epuñan (juanbrujo)
Links: Source Code / Demo
Created on: May 13, 2014
Made with: HTML, Less, JS
Tags: javascript, input, range
16. 3D Html5 Range Price Slider
a 3D CSS html5 range price slider inspired by Erik Deiner's concept: http://dribbble.com/shots/435827-Concept-for-budget-price-slider Works only with Chrome
Author: Vincent Durand (onediv)
Links: Source Code / Demo, Dribbble.com
Created on: October 23, 2013
Made with: HTML, CSS, JS
Tags: css3, 3d, range, slider
17. Create Custom Input Range | Pure Css3
Create Custom Input Range Pure Css3
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 21, 2020
Made with: HTML, CSS
Tags: create, custom, input, range, pure
18. Range Slider Using HTML And CSS
Reference from Online Tutorials
Author: Muhammad Fadzrin Madu (fadzrinmadu)
Links: Source Code / Demo
Created on: July 9, 2020
Made with: HTML, CSS, JS
Tags: html, css, range, slider
19. Vertical Range Slider
Author: Josh Stovall (joshstovall)
Links: Source Code / Demo
Created on: May 29, 2020
Made with: HTML, CSS
Tags: range, slider, vertical, form, input
20. Neumorphic Design Of A Range Slider With Pure CSS3
This is a range slider modified using purely css to create a skeumorphic design. The design was inspired by a 3d animation seen on dribbble by herolabs. The range slider is fully functional and doesn't use any images but just css. Enjoy :)
Author: Elijah (prof2k)
Links: Source Code / Demo
Created on: February 22, 2020
Made with: HTML, CSS, JS
Tags: css3, design, skeumorphic, slider, range
21. Gatsby Side Navigation - SVG Translation
Draw the SVG ultimately included in a project recreating Gatsby's side navigation. Links Gatsby Side Navigation, the final result. Gatsby Docs, inspiring the project in the first place. Be sure to resize the viewport to be thinner than 750px to marvel at the navigation.
Author: Gabriele Corti (borntofrappe)
Links: Source Code / Demo
Created on: November 12, 2019
Made with: HTML, CSS, JS
Tags: svg, input, range, translate, scale
22. Pure CSS - Classy Slider
Author: CodeMeNatalie (CodeMeNatalie)
Links: Source Code / Demo
Created on: October 14, 2019
Made with: HTML, SCSS
Tags: pure, css, slider, range
23. Pure CSS Range Slider (Cross-browser)
Author: Manitoba (Manitoba)
Links: Source Code / Demo
Created on: April 20, 2016
Made with: HTML, CSS, JS
24. Dynamic Grid Background With Custom Properties
Grid background created by multiple css gradients, sized with CSS custom properties (aka CSS variables). Dynamically change grid size via range slider (with output element). Powered by native HTML & vanilla JS.
Author: Allison Richmond (vengeanceindustries)
Links: Source Code / Demo
Created on: November 6, 2019
Made with: HTML, SCSS, JS
Tags: range-slider, custom properties, background gradient, css-variables
25. CSS Range Slider
Styling an input range slider with pure CSS. JS only to grab the value.
Author: Sean Stopnik (seanstopnik)
Links: Source Code / Demo
Created on: February 3, 2014
Made with: HTML, SCSS, JS
Tags: range-slider, sass, input, range, slider
26. Radio Button Dot-slider (Pure CSS)
A range-click slider with a sliding dot indicator, labels, validity-conditional styling, and NO JS. Works 100% on JS-restricted sites.
Author: Brandon McConnell (brandonmcconnell)
Links: Source Code / Demo
Created on: October 22, 2018
Made with: HTML, SCSS
Tags: range, no-js, form, css-only, range-slider
27. CSS Slider Test
testing css sliders.
Author: Kasper De Bruyne (kdbkapsere)
Links: Source Code / Demo
Created on: March 22, 2018
Made with: HTML, SCSS, JS
Tags: css, range-slider, animation
28. CSS Range Slider
Styling an input range slider with pure CSS. JS only to grab the value.
Author: Sean Stopnik (seanstopnik)
Links: Source Code / Demo
Created on: February 3, 2014
Made with: HTML, SCSS, JS
Tags: range-slider, sass, input, range, slider
More Awesome Lists:
Share: