Collection of free vanilla JavaScript range slider code examples. Update of April 2020 collection. 24 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Range
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
CSS Heat Map Slider Input
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Range Pills
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Love Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
Made with
- HTML / CSS / JS
About a code
Range Input
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Custom Web Component - Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: animate.css
Links
Made with
- HTML / CSS / JS
About a code
Custom Range Slider
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Wavy Numbers Gauge
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js
Links
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: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Range Slider Brightness
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML (Pug) / CSS (Stylus) / JS
About a code
Range Slider with Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Custom Range Slider with Values
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Rage Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
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
Links
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS (Babel)
About a code
Multi Handle Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Glitchy Elastic Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: tweenmax.js
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Multi Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Input Type Range #3
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Input Type Range #6
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -