25+ JavaScript Range Sliders - Free Code + Demos
Collection of 25+ JavaScript Range Sliders. All items are 100% free and open-source.
1. Range Slider With Text
Author: Angel (angelchen-design)
Links: Source Code / Demo
Created on: April 17, 2020
Made with: Pug, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
2. Custom Range Slider With Values
Author: Manan Tank ⚡️ (MananTank)
Links: Source Code / Demo
Created on: March 28, 2020
Made with: HTML, CSS, JS
Tags: slider, input, range
3. Rage Slider 💢
No, the title doesn’t contain a typo. Because if you dare touch this slider, it’ll unleash its fury!
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: March 11, 2020
Made with: HTML, CSS, JS
Tags: form controls, range-slider, range-input, u mad, funny
4. 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
5. Slider With Fill And Configurable Tick Marks
A slider with track fill, configurable tick marks and min/max labels Design by Outcrowd https://dribbble.com/shots/9659984-Mobile-App-Mail-Service
Author: Viesturs Marnauza (viestursm)
Links: Source Code / Demo, Dribbble Shot
Created on: January 27, 2020
Made with: HTML, CSS, JS
Tags: slider, input, range, tick marks
6. Rating Slider
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: January 15, 2020
Made with: HTML, SCSS, JS
Tags: rating, emoji, slider, ui, gsap
7. Multi Handle Slider Realistic 8
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: December 14, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
8. Morphing Emoji Slider
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: November 27, 2019
Made with: HTML, SCSS, JS
Tags: emoji, morphing, slider, smiley, svg
9. Input Type Range 3
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 5, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: javascript, slider, css-variables, mask, jade
10. Input Type Range 6
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 5, 2015
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: slider, javascript, css-variables, mask, conic-gradient
11. Price Slider (UIslider)
Make price slider (filter) with UiSlider library. UiSlider associated with inputs
Author: Bogdan (BogdanovB)
Links: Source Code / Demo
Created on: August 16, 2020
Made with: HTML, SCSS, JS
Tags: uislider, priceslider, rangeslider, pricefilter
12. SVG Balloon Slider
I'm currently building a UI with various SVG sliders for a client and I had this idea whilst I was making them. You can even throw the handle and the display text catches up! Check out the radio button that goes with it https://dribbble.com/shots/2378100-SVG-Splat-Radio-Button
Author: Chris Gannon (chrisgannon)
Links: Source Code / Demo
Created on: November 20, 2015
Made with: HTML, CSS, JS
Tags: svg, balloon, goo, slider, ui
13. Color Slider
スライダーの理解用に作ってみた。
Author: Rabbi🐰 (_rn1873)
Links: Source Code / Demo
Created on: June 14, 2020
Made with: HTML, CSS, JS
Tags: color, slider, range
14. Gooey Range Input
Author: Kacper Parzęcki (kparzecki)
Links: Source Code / Demo
Created on: June 20, 2020
Made with: HTML, SCSS, JS
Tags: svg, filter, goo, css, range
15. Input Range Dance
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: June 16, 2020
Made with: HTML, SCSS, JS
Tags: dance, cpc-slide, gsap, input, range
16. Range Slider
Author: Keith (KeithPaul)
Links: Source Code / Demo
Created on: March 29, 2020
Made with: HTML, SCSS, JS
Tags: range, slider, neumorphism, neomorphism
17. Price Range Input
This is a custom input to set a price range, usually used to filter products by price. This element is part of my AquaMar - UI Kit : https://codepen.io/CPboiboi/pen/gObwLVV
Author: CPboiboi (CPboiboi)
Links: Source Code / Demo
Created on: December 29, 2019
Made with: HTML, CSS, JS
Tags: price, range, input, thumb, rubber
18. SVG Bubble Slider
A dynamic menu I've built that can be used with either icons or text for the slider bubbles. This one is a fun emoticon rating slider - you can drag and throw or just click to show how you feel.
Author: Chris Gannon (chrisgannon)
Links: Source Code / Demo
Created on: March 14, 2016
Made with: HTML, CSS, JS
Tags: svg, slider, bubble, goo, emoticon
19. Input Range Exponential Box Sizing
Set of boxes growing exponentially, controlled by a range input
Author: CPboiboi (CPboiboi)
Links: Source Code / Demo
Made with: HTML, CSS, JS
20. Color-Changing Gauge Text
Just a range slider and a gauge that changes colors dynamically as the slider moved, text included, using a bit of CSS grid trickery and Vue.
Author: Josh Collinsworth (joshuajcollinsworth)
Links: Source Code / Demo
Made with: HTML, CSS, JS
21. Range Slider
Range slider vanilla javascript. noUISlider plugin
Author: Magura (Magura)
Links: Source Code / Demo
Created on: November 12, 2019
Made with: HTML, Stylus, JS
Tags: range, slider, nouislider, rangeslider, range-slider
22. Smoke Slider
From https://dribbble.com/shots/8044038-After-Effects-Smoke-Intensive
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo
Created on: November 21, 2019
Made with: HTML, SCSS, JS
Tags: smoke, slider, ui, range, gsap
More Awesome Lists:
Share: