12-jquery-range-sliders
Collection of free jQuery range slider examples.

Collection of free jQuery range slider code examples.

  1. CSS Range Sliders


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