Collection of free jQuery range slider code examples. Update of November 2019 collection. 5 new items.

Related Articles:

  1. CSS Range Sliders
  2. JavaScript Range Sliders

Author

  • Geffrey van der Bos

Made with

  • HTML / CSS / JS

About a code

Simple Calories Calculator

Styling range input and segmented control radio buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • peyman

Made with

  • HTML / CSS / JS

About a code

Room Select Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chris Heuberger

Made with

  • HTML / CSS (SCSS) / JS

About a code

Interest Rates Interactive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

  • Brandon McConnell

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Custom Range Slider

JS used for color-change and % label.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

  • John McGarrah

Made with

  • HTML / CSS / JS

About a code

Range Slider Value Feedback

Create a value feedback for the HTML5 <input type="range"> slider element.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: centerbox.css, rangeslider.css, centerbox.js, rangeslider.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