Cross-Browser Range Input With Solid Lower Fill

Developer
Noah Blon
Size
1,912 Kb
Views
20,240
  1. Cross-Browser Range Input With Solid Lower Fill Previews
  2. Cross-Browser Range Input With Solid Lower Fill HTML Codes
  3. Cross-Browser Range Input With Solid Lower Fill CSS Codes

How do I make an 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. Works everywhere I've tested that supports the range input. . What is a cross-browser range input with solid lower fill? How do you make a cross-browser range input with solid lower fill? This script and codes were developed by Noah Blon on 05 December 2022, Monday.

Cross-Browser Range Input With Solid Lower Fill Previews
IQ Test

Cross-Browser Range Input With Solid Lower Fill - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cross-Browser Range Input With Solid Lower Fill</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="range" value="25">
</body>
</html>

Cross-Browser Range Input With Solid Lower Fill - Script Codes CSS Codes

body { height: 100vh; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex;
}
input[type="range"] { margin: auto; -webkit-appearance: none; position: relative; overflow: hidden; height: 40px; width: 200px; cursor: pointer; border-radius: 0; /* iOS */
}
::-webkit-slider-runnable-track { background: #ddd;
}
/* * 1. Set to 0 height and width, and remove border for a slider without a thumb */
::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; /* 1 */ height: 40px; /* 1 */ background: #fff; box-shadow: -100vw 0 0 100vw dodgerblue; border: 2px solid #999; /* 1 */
}
::-moz-range-track { height: 40px; background: #ddd;
}
::-moz-range-thumb { background: #fff; height: 40px; width: 20px; border: 3px solid #999; border-radius: 0 !important; box-shadow: -100vw 0 0 100vw dodgerblue; box-sizing: border-box;
}
::-ms-fill-lower { background: dodgerblue;
}
::-ms-thumb { background: #fff; border: 2px solid #999; height: 40px; width: 20px; box-sizing: border-box;
}
::-ms-ticks-after { display: none;
}
::-ms-ticks-before { display: none;
}
::-ms-track { background: #ddd; color: transparent; height: 40px; border: none;
}
::-ms-tooltip { display: none;
}
Cross-Browser Range Input With Solid Lower Fill - Script Codes
Cross-Browser Range Input With Solid Lower Fill - Script Codes
Home Page Home
Developer Noah Blon
Username noahblon
Uploaded December 05, 2022
Rating 4.5
Size 1,912 Kb
Views 20,240
Do you need developer help for Cross-Browser Range Input With Solid Lower Fill?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Noah Blon (noahblon) Script Codes
Name
Colored SVG background-image - Filter Method
Glitch Pop
Free Radicals
Colored SVG background-image - Mask Method
An Intro to SVG Animation with SMIL - Example 1
SVG Christmas Light Icon Animated with CSS
Sass-managed SVG Background-Image icons
Juggle
3D CSS Text with Perspective
Burton Ball
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!