In today's software development, software development is a smart job. Software development not only provides a good salary but also social recognition as an engineer. In the early days, software development was very slow, but now it has become very fast with the introduction of artificial intelligence. Software development is now a speedy and intelligent job with accuracy and perfection. Most of the testing tools are also very speedy.
As time goes on, several devices have emerged in the market, and several browsers and operating systems have come. This makes development more challenging work so that a web page will perform with speed and have the same look and feel on all devices and browsers. That is the biggest headache for developers.
Today's discussion is about the HTML range input. The range input is a control that is very hard to maintain across all browsers, as its appearance differs from browser to browser. This control needs two sections: one is the track and another is the thumb. You need to define these sections separately. Here is an example of HTML range input CSS.
.rangeInput
{
-webkit-appearance:none;
appearance:none;
background:transparent;
cursor:pointer;
Width:250px;
Height:7px
}
.rangeInput::-webkit-slider-runnable-track
{
width :250px;
height :7px;
border-radius :10px;
background-color :rgb(107, 222, 219);
}
.rangeInput::-moz-range-track
{
width :250px;
height :7px;
border-radius :10px;
background-color :rgb(107, 222, 219);
}
.rangeInput::-webkit-slider-thumb
{
-webkit-appearance:none;width :15px;
height :15px;
border-radius: 10px;
background-color: rgb(64, 128, 128);
margin:-5.06px;
}
.rangeInput::-moz-range-thumb
{
width :15px;
height :15px;
border-radius: 10px;
background-color: rgb(64, 128, 128);
margin:-5.06px;
}.rangeInput::-ms-fill-lower
{
width :250px;
height :7px;
border-radius :10px;
background-color :rgb(107, 222, 219);
}
.rangeInput::-ms-fill-upper
{
width :250px;
height :7px;
border-radius :10px;
background-color :rgb(107, 222, 219);
}
.rangeInput::-ms-thumb
{
width :15px;
height :15px;
border-radius: 10px;
background-color: rgb(64, 128, 128);
margin:-5.06px;
}
As we discussed
Track = the line on which the slider moves.
Thumb = the circular/square handle that the user drags.
Here is some more attribute
::-webkit-slider-runnable-track — This attribute the slider's track WebKit browser (Chrome, Edge, Opera, Safari)
::-moz-range-track — This attribute styles slider's track in Mozilla Firefox.
::-webkit-slider-thumb — This attribute styles slider's thumb in WebKit browsers.
::-moz-range-thumb — Styles the slider's thumb (the draggable knob/handle) in Mozilla Firefox.
HTML range input can be designed in multiple ways. Range inputs are generally available in vertical and horizontal formats and can be designed in several patterns. For example, in one track, multiple thumbs can be introduced with multiple colors. The thumb can be circular, rectangular, or square, which we can control by Cascading Style Sheets (CSS). Below is an example of multiple thumbs with a single track.
Here is an example of an up-down or vertical range input.
CSS
rangeInput {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 7px;
height: 250px;
writing-mode: vertical-lr; /* Vertical */
}
/* Track */
.rangeInput::-webkit-slider-runnable-track {
width: 7px;
height: 250px;
border-radius: 10px;
background-color: rgb(107, 222, 219);
}
.rangeInput::-moz-range-track {
width: 7px;
height: 250px;
border-radius: 10px;
background-color: rgb(107, 222, 219);
}
/* Thumb */
.rangeInput::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(64, 128, 128);
margin-left: -4px;
}
.rangeInput::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(64, 128, 128);
border: none;
}
Here we introduce an excellent tool that solves all the problems related to the HTML range input element. This is a CSS generator. CSS stands for Cascading Style Sheets that are written to design HTML elements. In this tool, you just need to drag and drop or choose the values from the control boxes, and the element will automatically change in a live preview section.
While designing the element, you can observe that the corresponding CSS code is generated for your project. The most beautiful section of this tool is that it not only generates CSS code but also generates SCSS and Tailwind code. Your work is just to copy and paste the code into your project.
This is a totally free tool, and browser-based. No server communication is made during the working of the project, so your design is totally safe and under your control.
[Range Input CSS/SCSS/Tailwind Control Box
]
[Range Input CSS/SCSS/Tailwind --How CSS Generated]
.rangeInput
{
-webkit-appearance:none;
appearance:none;
background:transparent;
cursor:pointer;
Width:250px;
Height:10px
}
.rangeInput::-webkit-slider-runnable-track
{
width :250px;
height :10px;
border-radius :10px;
background-color :rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.rangeInput::-moz-range-track
{
width :250px;
height :10px;
border-radius :10px;
background-color :rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.rangeInput::-webkit-slider-thumb
{
-webkit-appearance:none;width :41px;
height :37px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(230, 226, 14);
background-color: rgb(115, 134, 230);
margin:-17.77px;
}
.rangeInput::-moz-range-thumb
{
width :41px;
height :37px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(230, 226, 14);
background-color: rgb(115, 134, 230);
margin:-17.77px;
}.rangeInput::-ms-fill-lower
{
width :250px;
height :10px;
border-radius :10px;
background-color :rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.rangeInput::-ms-fill-upper
{
width :250px;
height :10px;
border-radius :10px;
background-color :rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.rangeInput::-ms-thumb
{
width :41px;
height :37px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: rgb(230, 226, 14);
background-color: rgb(115, 134, 230);
margin:-17.77px;
}
[Range Input CSS Generated]
.rangeInput
{
-webkit-appearance:none;
appearance:none;
background:transparent;
cursor:pointer;
width:250px;
height:10px;
&::-webkit-slider-runnable-track
{
width:250px;
height:10px;
border-radius:10px;
background-color:rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
&::-moz-range-track
{
width:250px;
height:10px;
border-radius:10px;
background-color:rgb(107, 222, 219);
box-shadow:19px 19px 19px rgb(64, 128, 128);
background:linear-gradient(165deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
&::-webkit-slider-thumb
{
-webkit-appearance:none;
width:41px;
height:37px;
border-radius:10px;
background-color:rgb(115, 134, 230);
border-width:1px;
border-style:solid;
border-color:rgb(230, 226, 14);
}
&::-moz-range-thumb
{
width:41px;
height:37px;
border-radius:10px;
background-color:rgb(115, 134, 230);
border-width:1px;
border-style:solid;
border-color:rgb(230, 226, 14);
}
}
[Range Input SCSS Generated]
appearance-none
bg-transparent
cursor-pointer
w-[250px]
[&::-webkit-slider-runnable-track]:h-[10px]
[&::-webkit-slider-runnable-track]:rounded-[10px]
[&::-webkit-slider-runnable-track]:bg-gradient-to-r
[&::-webkit-slider-runnable-track]:from-[#408080]
[&::-webkit-slider-runnable-track]:to-[#afeb37]
[&::-webkit-slider-runnable-track]:shadow-[19px_19px_19px_#408080]
[&::-webkit-slider-thumb]:appearance-none
[&::-webkit-slider-thumb]:relative
[&::-webkit-slider-thumb]:w-[41px]
[&::-webkit-slider-thumb]:h-[37px]
[&::-webkit-slider-thumb]:rounded-[10px]
[&::-webkit-slider-thumb]:bg-[#7386e6]
[&::-webkit-slider-thumb]:border
[&::-webkit-slider-thumb]:border-[1px]
[&::-webkit-slider-thumb]:border-solid
[&::-webkit-slider-thumb]:border-[#e6e20e]
[&::-webkit-slider-thumb]:mt-[-13px]
[&::-moz-range-track]:h-[10px]
[&::-moz-range-track]:rounded-[10px]
[&::-moz-range-track]:bg-[#6bdedb]
[&::-moz-range-thumb]:w-[41px]
[&::-moz-range-thumb]:h-[37px]
[&::-moz-range-thumb]:rounded-[10px]
[&::-moz-range-thumb]:bg-[#7386e6]
[&::-moz-range-thumb]:border
[&::-moz-range-thumb]:border-[1px]
[&::-moz-range-thumb]:border-solid
[&::-moz-range-thumb]:border-[#e6e20e]
[Range Input Tailwind Generated]
Advantages and Disadvantages
CSS
Advantages: No setup required, supported by all browsers, simple to learn, and provides direct control over styles.
Disadvantages: Repetitive code, difficult to maintain in large projects, and does not support variables or functions.
SCSS
Advantages: Supports variables, nesting, mixins, and functions. Provides better code organization and reusable code.
Disadvantages: Requires a compilation step and has a slightly steeper learning curve than CSS.
Tailwind CSS
Advantages: Very fast development, utility-first approach, responsive classes, consistent design system, and less custom CSS required.
Disadvantages: Long class lists in HTML, requires setup, and can be difficult for beginners to read and understand markup.
When to Use CSS
- For simple websites.
- When learning web design basics.
- When maximum browser compatibility is required with minimal tooling.
When to Use SCSS
- For large enterprise projects.
- When complex styling logic is required.
- For projects that benefit from reusable and well-organized styles.
When to Use Tailwind CSS
- For rapid UI development.
- For implementing design systems.
- For component-based frontend frameworks such as React, Vue, and Angular.
Tailwind CSS or SCSS
- Both are excellent choices for modern frontend development, depending on your team's workflow and project requirements.
When to Use
Simple Website → CSS
Enterprise Project → SCSS
Rapid UI Development → Tailwind CSS
Design System → Tailwind CSS
Complex Styling Logic → SCSS
Learning CSS → CSS
React/Vue/Angular Projects → Tailwind CSS or SCSS
Maximum Browser Compatibility → CSS
[Some More Example from This tool]
Silent Feature:
User-Friendly Interface: The tool is designed for ease of use. Its simple layout permits you to see changes in real-time on the fly , user do not need to be coding expert.
Substantial Customization: From gradients to hover impacts, the choices are extensive
Responsiveness: Buttons developed are responsive, ensuring they look fantastic on all gadgets
Cross-Browser Compatibility: The CSS code generated works with all major browsers
You can visit more here
