Collection
Post cover

Best 17 jQuery Range Sliders

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

Simple Calories Calculator

Author: Geffrey van der Bos

Links: demo and code

Made with: HTML / CSS / JS

Styling range input and segmented control radio buttons.

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

Responsive: yes

Room Select Range Slider

Author: peyman

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Interest Rates Interactive

Author: Chris Heuberger

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Range Slider with Dynamic Icons

Author: LeFourbeFromage

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Responsive: yes

Dependencies: font-awesome.css, jquery.js, jquery-ui.js

Rubber Slider

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

HSL Preview (Range Slider)

Author: imchriskitchens

Links: demo and code

Made with: HTML / CSS / JS

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

CSS Custom Range Slider

Author: Brandon McConnell

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

JS used for color-change and % label.

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

Rounded Range Slider

Author: Sabine Robart

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js, roundslider.css, roundslider.js

Smiley Rating Slider Animation

Author: Aaron Iker

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS

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

Responsive: yes

Dependencies: jquery.js, jquery-ui.js, jquery.ui.touch-punch.js

"How Satisfied Are You?"

Author: Veronica

Links: demo and code

Made with: HTML / CSS / JS

Custom slider from scratch with jQuery.

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

Dependencies: jquery.js

Reactions Range Animation using SVG

Author: Yahia Refaiea

Links: demo and code

Made with: HTML (Pug) / CSS (Stylus) / JS (Babel)

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

Dependencies: jquery.js

Range Slider Output

Author: Michael Wolthers Nielsen

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Simple demo of output for a range slider.

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

Dependencies: jquery.js

Range Slider Value Feedback

Author: John McGarrah

Links: demo and code

Made with: HTML / CSS / JS

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

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

Dependencies: centerbox.css, rangeslider.css, centerbox.js, rangeslider.js

Gear Slider

Author: Mariusz Dabrowski

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Custom range slider made using jQuery UI.

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

Dependencies: jquery.js, jquery-ui.js

Range Slider with Feedback

Author: Mikey Wills

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js, rangeslider.js, underscore-min.js

Material Design Range Slider

Author: Andreas Storm

Links: demo and code

Made with: HTML (Pug) / CSS (Stylus) / JS (CoffeeScript)

Material design range slider in jQuery.

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

Dependencies: jquery.js, jquery-ui.min.js, jquery-ui.css

Range

Author: Andreas Storm

Links: demo and code

Made with: HTML / CSS (Stylus) / JS (CoffeeScript)

Range slider in jQuery.

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

Dependencies: jquery-ui.css, jquery.js, jquery-ui.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback