Post thumbnail: 14 CSS Range Sliders

14 CSS Range Sliders

Collection of hand-picked free HTML and CSS range slider code examples.

Demo image: Slider Range Slider Range - GIF Demo

Author

  • Marine Piette

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

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

Author

  • Noah Blon

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

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

Author

  • Renaud Tertrais

Links

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

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

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

Author

  • Ana Tudor

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

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

Author

  • Ana Tudor

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

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

Author

  • Ana Tudor

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

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

Author

  • Ana Tudor

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

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

Author

  • Ana Tudor

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

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

Author

  • Long Lazuli

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

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

Author

  • Ana Tudor

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

Demo image: Range Slider Range Slider - GIF Demo

Author

  • Chris Coyier

Links

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

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

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

Author

  • Vincent Durand

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

back to top