Collection of hand-picked free HTML and CSS range slider code examples. Update of May 2019 collection. 5 new items.

Related Articles:

  1. JavaScript Range Sliders
  2. jQuery Range Sliders

Author

  • Yair Even Or

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

Author

  • shashank sharma

Made with

  • HTML / CSS

About a code

CSS Range Slider

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

Responsive: no

Dependencies: -

Author

  • Chupai@Design

Made with

  • HTML / CSS (SCSS)

About a code

Neumorphism - Range Slider

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

Responsive: yes

Dependencies: -

Author

  • jonna

Made with

  • HTML / CSS

About a code

Styled Range Slider

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

Responsive: yes

Dependencies: -

Author

  • Laura Pinto

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

Author

  • Brandon McConnell

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

Author

  • Brandon McConnell

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

Demo image: Slider Range Slider Range - GIF Demo

Author

  • Marine Piette

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

Demo image: Cross-Browser Range Input with Solid Lower Fill Cross-Browser Range Input with Solid Lower Fill - GIF Demo

Author

  • Noah Blon

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

Demo image: Minimal Range Slider Minimal Range Slider - GIF Demo

Author

  • Renaud Tertrais

Made with

  • HTML / CSS (Less)

About the code

Minimal Range Slider

Only CSS3 minimal input range.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: <input type=range> #99 <input type=range> #99 - GIF Demo

Author

  • Ana Tudor

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

Demo image: input type=range #98 input type=range #98 - GIF Demo

Author

  • Ana Tudor

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

Demo image: input type=range #96 input type=range #96 - GIF Demo

Author

  • Ana Tudor

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

Demo image: input type=range #94 input type=range #94 - GIF Demo

Author

  • Ana Tudor

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

Demo image: input type=range #91 input type=range #91 - GIF Demo

Author

  • Ana Tudor

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

Demo image: input type=range #87 input type=range #87 - GIF Demo

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

input type=range #87

Cross-browser 1 element range slider.

Compatible browsers: Edge, Firefox

Dependencies: -

Demo image: input[type='range'] input[type=']range' - GIF Demo

Author

  • Long Lazuli

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

Demo image: input type=range #40 input type=range #40 - GIF Demo

Author

  • Ana Tudor

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

Demo image: Range Slider Range Slider - GIF Demo

Author

  • Chris Coyier

Made with

  • HTML / CSS

About the code

Range Slider

Customized range slider.

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

Dependencies: -

Demo image: Range Input: Change Live Value Range Input: Change Live Value - GIF Demo

Author

  • Jorge Epuñan

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

Demo image: Range Price Slider Range Price Slider - GIF Demo

Author

  • Vincent Durand

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