CSS Range Sliders

About a code

Ovoid CSS Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Curved CSS Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Bubble Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

iOS Like Vertical Range Input

The first range input has a minimum value of "0," a maximum value of "100", and a default value of "50". The second range input has the same values but with a step of "12.5". It also has two pseudo-elements, ::before and ::after, which are positioned absolutely and display the "+" and "−" symbols respectively. The thumb of the range input is hidden by setting its width to "0" and applying a box-shadow to create a visual effect. For the second range input with the step attribute, the background-color is set to transparent and a repeating-linear-gradient is used to create a striped pattern.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Metallic Range Input with Datalist Ticks

The range input has a datalist element associated with it, which contains five options for values "0", "25", "50", "75", and "100". The range input is styled to have a custom appearance, with a linear gradient background and an outline. The thumb of the range input is also styled with a custom appearance using radial and conic gradients for the background and multiple box shadows for shading. The datalist is styled to be displayed as a flex container with its options evenly spaced out and given a custom appearance with padding, border, text-shadow, and box-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Range Slider Progress in Chrome with Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multi Range Input, CSS-Only

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Neumorphism - Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Styled Range Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Classy Slider

This CSS code is used to style a range input element. It creates a gradient background for the range track using different color stops. The thumb of the range input is styled with a border, border-radius, and a background image. The background image is a small circle with a shadow effect. The cursor changes to a grabbing hand when the thumb is clicked and dragged.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Range Slider

Simple range slider in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS Custom Range Slider

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

About a code

Radio Button Dot-Slider

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Slider Range

Range slider for weight in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

About the code

Minimal Range Slider

Only CSS3 minimal input range.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

input type=range #99

Customized range slider with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

input type=range #98

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

Compatible browsers: Edge, Firefox

Dependencies: -

About the code

input type=range #96

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

Compatible browsers: Edge, Firefox

Dependencies: -

About the code

input type=range #94

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

About the code

input type=range #87

Cross-browser 1 element range slider.

Compatible browsers: Edge, Firefox

Dependencies: -

About the code

input[type='range']

Styling InputRange element, without extraDom or JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

About the code

Range Slider

Customized range slider.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

About the code

Range Price Slider

3D HTML5 range price slider.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: jquery.js