Collection of hand-picked free HTML and CSS range slider code examples. Update of May 2019 collection. 5 new items.
Related Articles:
Links
Made with
- HTML / CSS (SCSS)
About a code
Multi Range Input, CSS-Only
Range input slider with CSS ticks by using a wrapper with custom CSS properties (CSS variables) with min and max values printed at the edges. Minimum value text is aligned to the left, and maximum value same, to the right. The current value (output element) is always kept within the horizontal range of the component, so it won't overflow. The demo assumes some sort of JS template will auto-generate the markup, so it's zero manual work filling out all the many CSS variables / HTML attributes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Neumorphism - Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Styled Range Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS (SCSS)
About the code
Range Slider
Simple range slider in HTML and CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML / CSS (SCSS) / JS
About the code
CSS Custom Range Slider
CSS only range slider. JS used for color-change and % label.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS)
About a code
Radio Button Dot-Slider
A range-click slider in pure CSS with a sliding dot indicator, labels, validity-conditional styling, and NO JS. Works 100% on JS-restricted sites.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Slider Range
Range slider for weight in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Cross-Browser Range Input with Solid Lower Fill
Uses a box-shadow
on the pseudo thumb element to create a fill within the range input.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (Less)
About the code
Minimal Range Slider
Only CSS3 minimal input range.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #99
Customized range slider with HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #98
Range slider #98 in HTML, CSS, JS by Ana Tudor.
Compatible browsers: Edge, Firefox
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #96
Range slider #96 in HTML, CSS, JS by Ana Tudor.
Compatible browsers: Edge, Firefox
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
input type=range #94
Range slider #94 in HTML and CSS by Ana Tudor.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #91
It's great execution and a nice choice for a design to practice on.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #87
Cross-browser 1 element range slider.
Compatible browsers: Edge, Firefox
Dependencies: -
![input[type='range'] Demo image: input[type='range']](/assets/img/css-range-sliders/input-type-range-Equalizer.png)
![input[type='range'] input[type=']range' - GIF Demo](/assets/img/css-range-sliders/input-type-range-Equalizer.gif)
Links
Made with
- HTML / CSS (SCSS)
About the code
input[type='range']
Styling InputRange element, without extraDom or JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
input type=range #40
Range slider #40 in HTML, CSS and JS by Ana Tudor.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Range Slider
Customized range slider.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (Less) / JavaScript
About the code
Range Input: Change Live Value
Live change the value of the range input using JavaScript's "input" addEventListener
.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS / JavaScript
About the code
Range Price Slider
3D HTML5 range price slider.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: jquery.js