CSS Range Sliders | Bypeople

deals

premiumpacks & css range sliders (20 items)

Set of range sliders put together in popular code playgrounds like JSFiddle, CodePen and CSSDeck.

freebies

CSS styled linear sliders that range from 0 to 500. Top and bottom sliders have a step of 1 while the middle one has a step of 50 along the horizon...

CSS styled linear sliders that range from 0 to 500. Top and bottom sliders have a step of 1 while the middle one has a step of 50 along the horizontal axis. JavaScript is used only to grab the values and the code itself is highly modifiable. Made by Codepen.io user Sean Stopnik.

Prettify is a set of percentage denoted sliders created in pure CSS and powered with JavaScript functionalities.

Prettify is a set of percentage denoted sliders created in pure CSS and powered with JavaScript functionalities.

A nice CSS slider featured by SVG format figures that have a nice wobbling effect as you slide it along.

A nice CSS slider featured by SVG format figures that have a nice wobbling effect as you slide it along.

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.

A cool code snippet made in CSS depicting a simple sliding bar made with a realistic design. This bar includes a tooltip that changes the text acco...

A cool code snippet made in CSS depicting a simple sliding bar made with a realistic design. This bar includes a tooltip that changes the text accordingly to the percentage used. This code is can be modified in any way and you can use it freely. It was created by Codepen user Ana Tudor.

A compelling CSS and jQuery slider that divides two images within a frame for making a comparison. It can be used in software for showing how it wa...

A compelling CSS and jQuery slider that divides two images within a frame for making a comparison. It can be used in software for showing how it was before and how it is now (like its name indicates). It has an MIT License and it was created by JotForm.

A cool slider made with CSS and JavaScript complemented with a percentage, a code snippet that can be used for multiple purposes. It can be modifie...

A cool slider made with CSS and JavaScript complemented with a percentage, a code snippet that can be used for multiple purposes. It can be modified and styled to adapt it to your projects easily and it was put together by Ana Tudor.

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bund...

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bundle could be priced up to $380, get it only $14! Limited-time promo.

Philipp von Wedel from cssdeck has made an exciting freebie that looks like a slider control, but it uses div HTML elements to reach out this resul...

Philipp von Wedel from cssdeck has made an exciting freebie that looks like a slider control, but it uses div HTML elements to reach out this result. When you hover over each button, immediately a tooltip appears, showing the scale number. It could be used for music players templates or metric interfaces, and a great thing is that it is completely cross browser.

This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches. Although this only works...

This code experiment is a set of elements with an interesting style: one range slider (or just a slider) and two switches. Although this only works in Webkit, it is a small example of how powerful CSS can be. Transitioning the pseudo-element on the checkboxes was tricky, but not impossible. Most importantly, no additional elements were used. Use them on your next projects, as a website or a mobile app.

This is a set of knobs and sliders for graduating the volume and equalizing music within an app. It is composed of a volume knob and four sliders, ...

This is a set of knobs and sliders for graduating the volume and equalizing music within an app. It is composed of a volume knob and four sliders, which can be edited to perform any function. It is not functional, yet very easy to integrate in any mobile or web app that requires audio controls. It was created with SASS and HAML.

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

1000+ Photo Overlays, Only $14! 5k Resolution, 300 DPI, 13 Categories From Bubbles To Leaves & Natural Sunlight (87% Off)

This experiment creates a simple and realistic switch with the help of CSS, JavasCript and of course HTML. It sure has a realistic, yet minimal app...

This experiment creates a simple and realistic switch with the help of CSS, JavasCript and of course HTML. It sure has a realistic, yet minimal appearance, perfect for those who like a touch of realism in websites, blogs or mobile apps, but it can be improved with CSS.

This is a simple range slider for an e-commerce website or app. It shows a range of prices which can be altered or even added to complement the ori...

This is a simple range slider for an e-commerce website or app. It shows a range of prices which can be altered or even added to complement the original slider. It was created with HTML and JavaScript mainly, and even though it has a pretty simple and minimal design, it might be styled with a bit of CSS.

This code snippet creates a range slider that can be modified by typing the values to the select, selecting them with the arrows or by dragging and...

This code snippet creates a range slider that can be modified by typing the values to the select, selecting them with the arrows or by dragging and sliding the range controls, allowing you to put it in any location to acquire a desired value. You can edit the CSS to improve the visual appearance of the slider, the HTML to implement it on your website or blog.

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, an...

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, and Presentation Templates (97% Off)

This is a simple JavaScript slider that indicates the position by highlighting inner lines. It just needs a few lines of HTML and CSS to work prope...

This is a simple JavaScript slider that indicates the position by highlighting inner lines. It just needs a few lines of HTML and CSS to work properly, and it can be edited to improve every aspect of it, like its looks, functionality and integration.

This is the functional version of the CSS3 range slider that cssdeck's user Kushagra Agarwal posted some time ago. Actually, this version adds the ...

This is the functional version of the CSS3 range slider that cssdeck's user Kushagra Agarwal posted some time ago. Actually, this version adds the ability to slide the range knob by using the HTML5′s range input element. Range inputs can be styled using CSS3 by using some Webkit only properties.

This is an interesting static slider for indicating any number in a list. It is pretty simple, yet it indicates quite fluidly the value and the ind...

This is an interesting static slider for indicating any number in a list. It is pretty simple, yet it indicates quite fluidly the value and the index where it is located. It is created with HTML, SCSS and Javascript, code fragments that you can modify to improve the general performance of the slider.

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

A simple slider created with CSS, HTML and Javascript, perfect for using on iPad. It has an animation when you hover over, in which you see the ran...

A simple slider created with CSS, HTML and Javascript, perfect for using on iPad. It has an animation when you hover over, in which you see the range number popping up, and a simple and minimal style. However, it can be edited in order to make it look like your website, blog or mobile app. It was created by Codepen's user Satoshi.

This is a sliding scale with level indicator. Clicking on a level or dragging the knob work equally fine. It was created using HAML, SCSS and Coffe...

This is a sliding scale with level indicator. Clicking on a level or dragging the knob work equally fine. It was created using HAML, SCSS and CoffeeScript to simplify the way code is written ergo making the load and the overall performance faster. It was created by Mark Roseboom.

This is a security confirmation slider, great for confirming the deleting or downloading of files. It is composed of HTML, CSS and JavaScript, whic...

This is a security confirmation slider, great for confirming the deleting or downloading of files. It is composed of HTML, CSS and JavaScript, which you can edit to integrate on your website, improve the appearance and add further functionality. It has a minimal style, and its author was Bennett Feely.

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550...

Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550 USD. Find different materials and presentations (Box, Paper, Metal, Plastic and Bottle) and hundreds of possible matches and finishes for your packages.

This is a modal slider inspired by one that does not have much style. This was, however, styled properly, improving the overall appearance, the bor...

This is a modal slider inspired by one that does not have much style. This was, however, styled properly, improving the overall appearance, the border, shadows, and more. Even tough it is a great minimal example of a slider with push effect on click, it still lacks functionality.

This is a simple slider for regulating brightness, created with pure CSS. Its style is minimal, with few colors and not too bright; you can add fun...

This is a simple slider for regulating brightness, created with pure CSS. Its style is minimal, with few colors and not too bright; you can add functionality via Javascript, and even modify the CSS to enhance the looks of it. This code experiment was created by Nick Colley.