Collection of free jQuery range slider code examples.
Author
- LeFourbeFromage
Made with
- HTML / CSS (Less) / JS
About a code
Range Slider with Dynamic Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, jquery-ui.js
Author
- Aaron Iker
Made with
- HTML / CSS (SCSS) / JS
About a code
Rubber Slider
Price range slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js, tweenmax.js
Author
- imchriskitchens
Made with
- HTML / CSS / JS
About a code
HSL Preview (Range Slider)
Styling an input range slider with pure CSS. JS only to grab the value.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Author
- Sabine Robart
Made with
- HTML / CSS (SCSS) / JS
About a code
Rounded Range Slider
Curved, circular, circle shaped range slider. Drag the handle, click on the position you want or directly type your number. UI design jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, roundslider.css, roundslider.js
Author
- Aaron Iker
Made with
- HTML / CSS (SCSS) / JS
About a code
Smiley Rating Slider Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js
Author
- Veronica
Made with
- HTML / CSS / JS
About a code
“How Satisfied Are You?”
Custom slider from scratch with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Author
- Yahia Refaiea
Made with
- HTML (Pug) / CSS (Stylus) / JS (Babel)
About a code
Reactions Range Animation using SVG
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Author
- Michael Wolthers Nielsen
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Range Slider Output
Simple demo of output for a range slider.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Author
- Mariusz Dabrowski
Made with
- HTML / CSS (SCSS) / JS
About a code
Gear Slider
Custom range slider made using jQuery UI.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, jquery-ui.js
Author
- Mikey Wills
Made with
- HTML / CSS (SCSS) / JS
About a code
Range Slider with Feedback
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, rangeslider.js, underscore-min.js
Author
- Andreas Storm
Made with
- HTML (Pug) / CSS (Stylus) / JS (CoffeeScript)
About a code
Material Design Range Slider
Material design range slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js, jquery-ui.min.js, jquery-ui.css
Author
- Andreas Storm
Made with
- HTML / CSS (Stylus) / JS (CoffeeScript)
About a code
Range
Range slider in jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery-ui.css, jquery.js, jquery-ui.js