18 Best CSS Range Sliders for Better UI

By | January 24, 2019

CSS Range Sliders are a great way to showcase a lot of information without overwhelming your audience. They are also fun to use and can be used to emphasize an aspect of your content. CSS Range Sliders are a great way to visually represent a range of values using a slider. They are an alternative to the HTML slider and can be customized in many ways. This is a collection of free CSS Range Sliders.

CSS Range Sliders x
CSS Range Sliders

Author

  • Boris Šehovac
  • October 19, 2018

Link

Made with

  • Pug / Sass / JS

About the Code

CSS Range Sliders: Spring Animations

Updated on October 19, 2018

More info: Link

Dependency:


Author

  • Josiah Ruddell
  • February 14, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS Range Slider

Control outputs a single value but visually creates a trigger point to the end-user. Updated on February 20, 2013

More info: Link

Dependency:


Author

  • Sabine Robart
  • November 21, 2018

Link

Made with

  • HTML / SCSS / JS

About the Code

Rounded Range Slider

Curved, circular, circle-shaped range slider. Drag the handle, click on the position you want, or directly type your number. Ui design jquery. Updated on January 15, 2019

More info: Link

Dependency: jquery.min.js, roundslider.min.js


Author

  • Clint Brown
  • July 6, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

HTML5 CSS Range Sliders

Currently only supported in Webkit. Updated on November 13, 2013

More info: Link

Dependency: jquery.min.js


Author

  • David Khourshid
  • July 23, 2017

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS Responsive House

Change the slider to see the effect. Updated on September 5, 2019

More info: Link

Dependency: flipping.animationFrame.js, rxjs.umd.min.js


Author

  • Simon Goellner
  • July 9, 2015

Link

Made with

  • HTML / SCSS / JS

About the Code

Modern, Usable, Responsive Sliders

Based on Ana Tudor’s styling of CSS Range Sliders, I have used my own extension for jQueryUI to create really usable and pretty CSS range sliders. Updated on November 3, 2016

More info: Link

Dependency: jqueryui.min.css, jquery-ui-slider-pips.min.css, app.min.css, jquery-plus-ui.min.js, jquery-ui-slider-pips.js


Author

  • Dima
  • October 14, 2016

Link

Made with

  • Pug / Stylus / JS

About the Code

price range slider

simple price range slider javascript CSS. Updated on October 29, 2016

More info: Link

Dependency:


Author

  • Casey Hunt
  • July 3, 2013

Link

Made with

  • HTML / CSS / JS

About the Code

jQuery Time Range Slider

Updated on July 3, 2013

More info: Link

Dependency: jquery-ui.css, jquery.min.js, jquery-ui.min.js


Author

  • Cweili
  • January 20, 2015

Link

Made with

  • Pug / Stylus / CoffeeScript

About the Code

Bootstrap Ranges

CSS Range sliders based on Bootstrap. Updated on January 26, 2015

More info: Link

Dependency: bootstrap.min.css, bootstrap-theme.min.css, avalon.modern.min.js


Author

  • Trevan Hetzel
  • September 8, 2015

Link

Made with

  • HTML / SCSS / JS

About the Code

Custom range input slider with labels

Updated on September 9, 2015

More info: Link

Dependency: jquery.min.js


Author

  • Jorge Epuñan
  • May 13, 2014

Link

Made with

  • HTML / Less / JS

About the Code

Range Input: change live value

Live to change the value of the range input using JavaScript’s ‘input’ addEventListener. Updated on May 13, 2014

More info: Link

Dependency:


Author

  • Vincent Durand
  • October 23, 2013

Link

Made with

  • HTML / CSS / JS

About the Code

3D html5 Range price slider

a 3D CSS html5 range price slider. Updated on July 20, 2018

More info: Link

Dependency: jquery.min.js


Author

  • Eric Grucza
  • April 7, 2015

Link

Made with

  • HTML / CSS / JS

About the Code

Gradient Range Slider

Little gradient range input for an upcoming project with thumb change on the slide. Updated on April 7, 2015

More info: Link

Dependency: jquery.min.js


Author

  • Michael Wolthers Nielsen
  • July 12, 2016

Link

Made with

  • HTML / SCSS / JS

About the Code

Range slider output

Simple demo of output for a range slider. Updated on July 13, 2016

More info: Link

Dependency: jquery-2.2.4.min.js


Author

  • Sean Stopnik
  • February 3, 2014

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS Range Slider

Styling an input range slider with pure CSS. JS only to grab the value. Updated on March 29, 2018

More info: Link

Dependency: jquery.min.js


Author

  • Chris Gannon
  • January 18, 2019

Link

Made with

  • HTML / CSS / TypeScript

About the Code

Drinking Water Bottle

Drink your water!

More info: Link

Dependency: TweenMax-latest-beta.js, ModifiersPlugin-latest-beta.js, Draggable.min.js, ThrowPropsPlugin.min.js, DrawSVGPlugin.js


Author

  • Angela He
  • December 19, 2018

Link

Made with

  • HTML / SCSS / JS

About the Code

Day 5: Scalable 3D Range Sliders

3d shaded, scalable range sliders using SCSS, HTML, and some Javascript. Updated on December 25, 2018

More info: Link

Dependency:


Author

  • Pogany
  • July 19, 2018

Link

Made with

  • HTML / SCSS / Babel

About the Code

Stripe.com Style Dropdown Menu

My idea is that you can create a fancy (or less fancy) slider with SVG and connect it (behind the scenes) to a real input type range. In this case, the input type range is disabled and still visible (for the sake of the argument), but it shouldn’t be. Updated on July 29, 2018

More info: Link

Dependency:


Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.