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.
About the Code
CSS Range Sliders: Spring Animations
Updated on October 19, 2018
More info: Link
Dependency: –
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: –
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
About the Code
HTML5 CSS Range Sliders
Currently only supported in Webkit. Updated on November 13, 2013
More info: Link
Dependency: jquery.min.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
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
About the Code
price range slider
simple price range slider javascript CSS. Updated on October 29, 2016
More info: Link
Dependency: –
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
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
About the Code
Custom range input slider with labels
Updated on September 9, 2015
More info: Link
Dependency: jquery.min.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: –
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
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
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
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
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
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: –
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: –
Leave a Reply