Collection of free vanilla JavaScript range slider code examples.

10 JavaScript Range Sliders

Collection of free vanilla JavaScript range slider code examples.

Related Articles

  1. CSS Range Sliders
  2. jQuery Range Sliders

Author

  • Angel

Made with

  • HTML (Pug) / CSS (Stylus) / JS

About a code

Range Slider with Text

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

Responsive: yes

Dependencies: -

Author

  • Manan Tank

Made with

  • HTML / CSS / JS

About a code

Custom Range Slider with Values

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Rage Slider

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Unicycle Range Slider

A range input where a stick figure is on a unicycle whose wheel is the handle. Watch him peddle and the flag display the value as you drag the wheel left and right.

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

Responsive: yes

Dependencies: -

Author

  • Viesturs Marnauza

Made with

  • HTML / CSS / JS

About a code

Slider with Fill and Configurable Tick Marks

A slider with track fill, configurable tick marks and min/max labels.

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

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Rating Slider

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

Responsive: no

Dependencies: gsap.js, draggable.js, morphsvgplugin.js, inertiaplugin.js

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Multi Handle Slider Realistic #8

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

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Morphing Emoji Slider

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

Responsive: no

Dependencies: gsap.js, draggable3.js, morphsvgplugin.js, inertiaplugin.js

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Input Type Range #3

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

Responsive: yes

Dependencies: -

Demo image: Input Type Range 6

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Input Type Range #6

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

Responsive: yes

Dependencies: -

back to top