21 jQuery Range Sliders

About a code

Number Animation and Input Range

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

Responsive: no

Dependencies: tweenmax.js

About a code

Radial Range Slider

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

Responsive: no

Dependencies: -

About a code

Simple Calories Calculator

Styling range input and segmented control radio buttons.

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

Responsive: yes

Dependencies: -

About a code

Room Select Range Slider

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

Responsive: yes

Dependencies: -

About a code

Interest Rates Interactive

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

Responsive: yes

Dependencies: -

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

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

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

About a code

CSS Custom Range Slider

JS used for color-change and % label.

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

Responsive: no

Dependencies: -

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

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

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

About a code

Reactions Range Animation using SVG

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

Responsive: no

Dependencies: jquery.js

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

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

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

About a code

Range Slider with Feedback

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

Responsive: no

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

About a code

Contact Form with Budget Slider

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

Responsive: yes

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

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

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

About a code

Themed Price Ranges

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

Responsive: no

Dependencies: -