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: -