25+ jQuery Range Sliders - Free Code + Demos
Collection of 25+ jQuery Range Sliders. All items are 100% free and open-source.
1. Range Slider With Dynamic Icons
Author: LeFourbeFromage (lefourbefromage)
Links: Source Code / Demo
Created on: October 4, 2019
Made with: HTML, Less, JS
2. Rubber Slider
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: September 30, 2019
Made with: HTML, SCSS, JS
Tags: rubber, elastic, greensock, slider, ui
3. Hsl Preview Range Slider
Styling an input range slider with pure CSS. JS only to grab the value.
Author: imchriskitchens (imchriskitchens)
Links: Source Code / Demo
Created on: March 9, 2019
Made with: HTML, CSS, JS
Tags: range-slider, sass, input, range, slider
4. Rounded Range Slider
Author: Sabine Robart (_Sabine)
Links: Source Code / Demo
Created on: November 21, 2018
Made with: HTML, SCSS, JS
Tags: round, range-slider, handle, design, thermostat
5. Smiley Rating Slider Animation
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: August 14, 2018
Made with: HTML, SCSS, JS
6. How Satisfied Are You - JQuery Range Slider
Custom slider from scratch with jquery
Author: Veronica (veronicadev)
Links: Source Code / Demo
Created on: May 15, 2018
Made with: HTML, CSS, JS
Tags: slider, css3, jquery, javascript, svg
7. Reactions Range Animation Using SVG
Author: Yahia Refaiea (YahiaRefaiea)
Links: Source Code / Demo
Created on: May 3, 2018
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
8. Range Slider Output
Simple demo of output for a range slider
Author: Michael Wolthers Nielsen (wolthers)
Links: Source Code / Demo
Created on: July 12, 2016
Made with: HTML, SCSS, Babel
Tags: input, output, range, slider, rangeslider
9. Gear Slider
Custom range slider made using jQuery UI.
Author: Mariusz Dabrowski (MarioD)
Links: Source Code / Demo
Created on: April 4, 2016
Made with: HTML, SCSS, JS
Tags: slider, jquery, range
10. Range Slider With Feedback
Author: Mikey Wills (mukealicious)
Links: Source Code / Demo
Created on: February 19, 2016
Made with: HTML, SCSS, JS
11. Material Design Range Slider
Author: Andreas Storm (andreasstorm)
Links: Source Code / Demo
Created on: October 14, 2014
Made with: Pug, Stylus, CoffeeScript
CSS Pre-processor: Stylus
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: range, input, slider, handle, ui
12. Slider Range Mars Weight Calculator
Author: Marine Piette (mayuMPH)
Links: Source Code / Demo
Created on: August 1, 2018
Made with: HTML, SCSS, JS
13. Range Slider
Interaction for range slider
Author: Dropinks (dropinks)
Links: Source Code / Demo
Created on: July 27, 2020
Made with: HTML, CSS, JS
Tags: rangeslider, sliderinetraction, slider
14. Slider
Slider inspired on dribbble @gevvvi https://dribbble.com/shots/1054598-Slider?list=buckets&offset=2
Author: mario s maselli (mariosmaselli)
Links: Source Code / Demo
Created on: June 21, 2014
Made with: HTML, SCSS, JS
Tags: css, ux, ui
15. Gear Slider
Custom range slider made using jQuery UI.
Author: Mariusz Dabrowski (MarioD)
Links: Source Code / Demo
Created on: April 4, 2016
Made with: HTML, SCSS, JS
Tags: slider, jquery, range
16. Custom Range Input Slider With Labels
Author: Trevan Hetzel (trevanhetzel)
Links: Source Code / Demo
Created on: September 8, 2015
Made with: HTML, SCSS, JS
Tags: range, input, labels, css, slider
17. Logarithmic Slider
A logarithmic slider, built with the ion.rangeSlider jQuery plugin
Author: Florian Strasser (flostrasser)
Links: Source Code / Demo
Created on: July 24, 2020
Made with: HTML, CSS, JS
Tags: logarithmic, slider, rangeslider, jquery, range
18. Draggable Price Scale
Custom UI for https://github.com/skidding/dragdealer with some preset data
Author: Wayne Roddy (dubrod)
Links: Source Code / Demo
Created on: October 14, 2014
Made with: HTML, CSS, JS
Tags: pricing, scale, slider, range, ui
19. Google Material Sliders
As shown here:
Author: Leena Lavanya (leenalavanya)
Links: Source Code / Demo
Created on: May 16, 2016
Made with: HTML, CSS, JS
20. SVG Circular Progress
Author: Christophe67 (AgnusDei)
Links: Source Code / Demo
Made with: HTML, CSS, JS
21. SVG Fill From NoUI Range Slider Values
SVG fill color changes through color sequence based on values from noUI slider.
Author: Josh (iamjoshellis)
Links: Source Code / Demo
Created on: April 29, 2015
Made with: HTML, CSS, JS
Tags: nouislider, range-slider, svg
22. JQuery UI Slider Restricted Drag
Simple attempt to use JQuery UI slider with setting min value and restricting slider to be dragged beyond the min value.
Author: Denish (DenishG)
Links: Source Code / Demo
Created on: March 12, 2014
Made with: HTML, CSS, JS
Tags: jquery-jquery-ui-slider
23. BudgetSlider
simple jQuery slider in a 3d design. Inspired by Erik Deiner /* see credits */
Author: Hornebom (Hornebom)
Links: Source Code / Demo
Created on: August 8, 2013
Made with: HTML, CSS, JS
Tags: css3, transform, jquery, dribbble, gradient
More Awesome Lists:
Share: