Collection of free vanilla JavaScript range slider code examples. Update of April 2020 collection. 24 new items.

Related Articles

  1. CSS Range Sliders
  2. jQuery Range Sliders

Author

  • Reza Lavarian

Made with

  • HTML / CSS / JS

About a code

Range

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

Responsive: yes

Dependencies: -

Author

  • Jase

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Heat Map Slider Input

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS (Sass) / JS

About a code

Range Pills

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

Responsive: yes

Dependencies: -

Author

  • Mykola Boychuk

Made with

  • HTML / CSS / JS

About a code

Range Slider

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

Responsive: yes

Dependencies: -

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

About a code

Love Slider

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

Responsive: yes

Dependencies: gsap.js

Author

  • Darshan Rajadhyaksha

Made with

  • HTML / CSS / JS

About a code

Range Input

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

Responsive: no

Dependencies: -

Author

  • jester

Made with

  • HTML / CSS (SCSS) / JS

About a code

Custom Range Input

Custom range input with snapping values made with GSAP Draggable.

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

Responsive: yes

Dependencies: gsap.js

Author

  • itsBadBit

Made with

  • HTML / CSS / JS

About a code

Custom Web Component - Range Slider

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

Responsive: no

Dependencies: -

Author

  • Tanzyingsz

Made with

  • HTML / CSS / JS

About a code

Range Slider

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

Responsive: yes

Dependencies: animate.css

Author

  • MinzCode

Made with

  • HTML / CSS / JS

About a code

Custom Range Slider

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Craig Roblewsky

Made with

  • HTML / CSS / JS

About a code

Wavy Numbers Gauge

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

Responsive: yes

Dependencies: gsap.js

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Neumorphic Ranges With a Ball Handle

Another fun neumorphic exploration.

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS / JS

About a code

Range Sliders With a Rolling Counter

Watch the digits roll into place as you adjust these range sliders.

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

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Rubber Slider v2

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

Responsive: no

Dependencies: nouislider.js, gsap.js

Author

  • RuuuFF

Made with

  • HTML / CSS / JS

About a code

Range Slider Brightness

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

Responsive: yes

Dependencies: font-awesome.css

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

  • Ana Tudor

Made with

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

About a code

Multi Handle Slider

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

Responsive: yes

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

  • Kasper De Bruyne

Made with

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

About a code

Range Slider with GSAP

Just a simple range slider.

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

Responsive: yes

Dependencies: gsap.js

Author

  • Magura

Made with

  • HTML / CSS (Stylus) / JS

About a code

Range Slider

Range slider vanilla JavaScript.

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

Responsive: yes

Dependencies: nouislider.css, nouislider.js

Author

  • Clément Roche

Made with

  • HTML / CSS (SCSS) / JS

About a code

Glitchy Elastic Slider

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

Responsive: no

Dependencies: tweenmax.js

Author

  • Chris Gannon

Made with

  • HTML / CSS / JS

About a code

Smart Home Temperature Slider

Smart home water temperature concept.

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

Responsive: yes

Dependencies: tweenmax.js

Author

  • Keari Eggers

Made with

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

About a code

Multi-range Slider

No dependencies. Keyboard accessible.

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

Responsive: yes

Dependencies: -

Author

  • Yair Even Or

Made with

  • HTML / CSS (SCSS) / JS

About a code

Multi Range Slider

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

Responsive: yes

Dependencies: -

Author

  • Kevin

Made with

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

About a code

Flat Range Sliders

Animated, flat range slider with the help of noUiSlider.

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

Responsive: yes

Dependencies: nouislider.js

Author

  • Kunuk Nykjær

Made with

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

About a code

Vertical Input Range Cross-Browser Supported

Vertical cross-browser supported input range html elements, no library dependency, no transform rotate.

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

Responsive: yes

Dependencies: -

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