Multi Range Input, Css-Only

11.10.2020

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.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderMulti Range Input, Css-Only

Css Range Slider

11.09.2020

Made with: HTML,CSS

View Code

PlaceholderCss Range Slider

Neumorphism - Range Slider

3.09.2020

Made with: HTML,CSS (SCSS)

View Code

PlaceholderNeumorphism - Range Slider

Styled Range Slider

31.08.2020

Made with: HTML,CSS

View Code

PlaceholderStyled Range Slider

Range Slider

27.02.2019

Simple range slider in HTML and CSS.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderRange Slider

Css Custom Range Slider

20.12.2018

CSS only range slider. JS used for color-change and % label.

Made with: HTML,CSS (SCSS),JS

View Code

PlaceholderCss Custom Range Slider

Radio Button Dot-Slider

22.10.2018

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.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderRadio Button Dot-Slider

Slider Range

1.08.2018

Range slider for weight in HTML, CSS and JavaScript.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Slider Range

Cross-Browser Range Input With Solid Lower Fill

10.11.2015

Uses a box-shadow on the pseudo thumb element to create a fill within the range input.

Made with: HTML,CSS

View Code

Cross-Browser Range Input With Solid Lower Fill

Minimal Range Slider

21.08.2015

Only CSS3 minimal input range.

Made with: HTML,CSS (Less)

View Code

Minimal Range Slider

Input Type=Range #99

21.03.2015

Customized range slider with HTML, CSS and JS.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #99

Input Type=Range #98

19.03.2015

Range slider #98 in HTML, CSS, JS by Ana Tudor.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #98

Input Type=Range #96

17.03.2015

Range slider #96 in HTML, CSS, JS by Ana Tudor.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #96

Input Type=Range #94

16.03.2015

Range slider #94 in HTML and CSS by Ana Tudor.

Made with: HTML,CSS (SCSS)

View Code

Input Type=Range #94

Input Type=Range #91

15.03.2015

It's great execution and a nice choice for a design to practice on.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #91

Input Type=Range #87

12.03.2015

Cross-browser 1 element range slider.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #87

Input[Type='Range']

19.02.2015

Styling InputRange element, without extraDom or JS.

Made with: HTML,CSS (SCSS)

View Code

Input[Type='Range']

Input Type=Range #40

15.02.2015

Range slider #40 in HTML, CSS and JS by Ana Tudor.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Input Type=Range #40

Range Slider

5.11.2014

Customized range slider.

Made with: HTML,CSS

View Code

Range Slider

Range Input: Change Live Value

13.05.2014

Live change the value of the range input using JavaScript's "input" addEventListener.

Made with: HTML,CSS (Less),JavaScript

View Code

Range Input: Change Live Value