Effortless Slider Styling: Create Custom CSS Range Inputs in Seconds

What is Range Input  range in HTML ?

                Range Input is a control that is present in very early versions of HTML. Input Range is generally used for selecting range values. For example. 

1. I can set a price range from 0 to 1000.

2. I can set the audio volume. 

3. I can calculate the loan amount or interest rate. 

          For example, here is a color code range. The color code can be from 0 to 255 Red, Green and Blue. Three color codes are present there. Users have to set them, and users change the color code value, and the final color will be displayed. Thus, the HTML range is essential for Web Development and Web applications.

 

 

The basic Syntax of HTML range is 

<input type="range" min="1" max="255" value="50" > 

                    For our example, the minimum was zero(o) and the maximum value defined the maximum (255) and step defined the amount of value in each step. Here set one(1). One thing must be noted that the HTML Input Range also supports custom attributes. For example, I have an attribute called 'sonjukta'. An example is how custom attributes can be added to the control and how JavaScript can handle the custom attribute.

 <input type="range" min="1" max="255" value="50" sonjukta="brightness-control" id="rangeInput">

 <script>
  const rangeInput = document.getElementById('rangeInput');

  // Access the custom attribute
  const sonjuktaValue = rangeInput.getAttribute('sonjukta');

  // Example usage: log value change and custom attribute
  rangeInput.addEventListener('input', function () {
    console.log(`Value: ${this.value}, Sonjukta: ${sonjuktaValue}`);
    
    // Example: Do something if attribute is 'brightness-control'
    if (sonjuktaValue === 'brightness-control') {
      document.body.style.filter = `brightness(${this.value}%)`;
    }
  });
</script>

                       Input Ranges appear differently in different browsers. When you open Mozilla and Chrome, you will notice the two designs are different. That is the challenging portion for a Web Designer to keep the consistency of design throughout the browser. This required pseudocode for vendor specific.  Range Input can be horizontal or vertical. Here is an example of horizontal and vertical.

 

 

 

Vertical and Horizontal Range Input

 

<input type="range" orient="vertical" />

input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 16px;
    vertical-align: bottom;
} 

           HTML Range Input is basically operated by either mouse or skin touch, is doing not allow typing, only drag and drop. This control works on both desktop, mobile and other devices. HTML Range Input has two parts. One is a Thumb and another is a Slider. Thumb moves onto Slider. In some browsers Thumb and Slider properties,  if not adjusted properly, the design is distorted. Here is an example of the same.

 

 

 

                     So, the designing of the Input Range is very critical. Designers need to handle browser-specific pseudocodes for design for thumb and separate designs for range input and finally merge to create a single CSS. This requires a lot of time to design HTML Range input. This type of problem is a time-consuming matter. Sanjukta.com introduced the CSS Range Input Generator. This is a free and open-source tool to handle CSS generation for Range Input. Every day, thousands of designers create their own designs and happily place the CSS in their projects.

                 This tool allows creating CSS i, e Cascading Styles Sheet for HTML Range Input and downloading and copying the code. This tool is made of free software like JavaScript, Mysql etc. and open to all. This tool allows Live Preview when you are changing designs. You don't need to check again and again and open it with a browser to see your code and to test multiple browsers and to test multiple devices. The code will create a code which is all browser comparable and all device compatible.

 

 

| Browser               |   Engine           | Prefix Used | Example Pseudo-Element   |
| --------------------- | ----------------   | ----------- | ------------------------ |
| Chrome                | Blink/WebKit  | -webkit-  | ::-webkit-slider-thumb |
| Safari                   | WebKit            |-webkit-   | ::-webkit-slider-thumb |
| Firefox                 | Gecko             | -moz-       | ::-moz-range-thumb     |
| Edge (Old)           | EdgeHTML    | -ms-         | ::-ms-thumb            |
| Edge (New)          | Blink              | -webkit-   | ::-webkit-slider-thumb |
| Internet Explorer  | Trident           | -ms-         | ::-ms-thumb            |

 

                     CSS Range Input Generator has four tabs. The first  tab is for "Thumb Decoration". Height, width , and border  radius style can be designed from this tab, not only that margin, opacity and shadow , shadow color can be adjusted from this tab.

                     The "Track Decoration" decoration is a tab which is used for decorating tracks. track with, height, border radius, border, background color, border type can be designed from here. Shadow and shadow color can be adjusted from here.

                      "Track Gradient" is used for background color. Gradient means multiple colors. This tool allows tracks having multiple colors with an angle option and the gradient is in degrees.

                       Finally, there is this tab called "Track Gradient". It  allows slider background image addition and removal and overall control padding and margin. Padding like top, button, left, right can be adjusted separately, margins like top, button, left, right can be adjusted separately. Finally,  the CSS can be downloaded or copied by just clicking once. Around 30 examples are attached with the tool so that users can have an experience of how the tool works. Here is the example of CSS generated by this tool and the output.

 

 

 

<input type=range class=YourCss  />

<style>
.YourCss
{
    -webkit-appearance:none;
    appearance:none;
    background:transparent;
    cursor:pointer;
    Width:249px;
    Height:17px
}

.YourCss::-webkit-slider-runnable-track
{
    width :249px;
    height :17px;
    border-radius :10px;
    background-color :rgb(107, 222, 219);
    background:linear-gradient(72deg,rgb(64, 128, 128),rgb(175, 235, 55));
} 
.YourCss::-moz-range-track
{
    width :249px;
    height :17px;
    border-radius :10px;
    background-color :rgb(107, 222, 219);
    background:linear-gradient(72deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.YourCss::-webkit-slider-thumb
{
    -webkit-appearance:none;width :40px;
    height :32px;
    border-radius: 10px;
    border-width: 1px;
    border-style:  solid;
    border-color: rgb(46, 12, 12);
    background-color: rgb(209, 203, 88);
    margin:-14.88px;
}
.YourCss::-moz-range-thumb
{
    width :40px;
    height :32px;
    border-radius: 10px;
    border-width: 1px;
    border-style:  solid;
    border-color: rgb(46, 12, 12);
    background-color: rgb(209, 203, 88);
    margin:-14.88px;

}

.YourCss::-ms-fill-lower
{
    width :249px;
    height :17px;
    border-radius :10px;
    background-color :rgb(107, 222, 219);
    background:linear-gradient(72deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.YourCss::-ms-fill-upper 
{
    width :249px;
    height :17px;
    border-radius :10px;
    background-color :rgb(107, 222, 219);
    background:linear-gradient(72deg,rgb(64, 128, 128),rgb(175, 235, 55));
}
.YourCss::-ms-thumb 
{
    width :40px;
    height :32px;
    border-radius: 10px;
    border-width: 1px;
    border-style:  solid;
    border-color: rgb(46, 12, 12);
    background-color: rgb(209, 203, 88);
    margin:-14.88px;
}
</style> 

Why should you use this tool  ?

There are different tools available for CSS generation, but this tool has some unique features.

• This tool is very fast and sophisticated. 

• The tool designs CSS only with the required attribute, extra attributes are removed from this CSS. This makes CSS very compact and useful and cost-saving for the project.

• This tool can be used by those who have no coding experience or even an idea for a Cascading Style Sheet. Just drag and drop, and you will get a Live Preview and you see the code is ready. Just Copy or copy CSS generated by the tool.

• The CSS generated by this tool is user property. The provider does not have any copyright on the CSS, you can apply it for a student project and for commercial purposes also.

• This tool is free and open source, no licensing is required, and it operates on a very low internet connection also.

• The tool is very safe, user data is not stored, cookies are not present there, users do not have to create a login account or user account, they just open the software and use it.

• The user can set the background of the Live Preview color to match with the project he is working with.

 

Future scope of the tool 

•  In the future, the tool become AI supported, users will type or comment on the tool and the tool with the design itself and Live Preview will appear. 

•  Users would be able to share their work. Users can design and share the link with the other person and using the receiver can open the link and see the design.

•  The tool in future will be a multiple save option.Users will be able to save multiple designs for their future projects. The saving option will be by name.

•  In the future, users will require a login option if they want to save the work.

•  In future, another option will be added, If if the user's browser is closed, the user will not lose their work, local session storage will be handled get back the work. 

•  In future, users will be able to generate an image of the control so that the image can be placed in their project. Images will be PNG, JPG and other formats.

     But the tool will remain free forever, The providers will never charge any costs for using these tool.

Frequently Asked Question 

Can this CSS be used for other HTML elements ?

The CSS design by the tool is specified design for Range Input, generated CSS will not be effective for other HTML elements like buttons, text, label etc. Range Input has two parts, Thumb and Slider, so the design is difficult and separated. No other HTML element has this type of two part, so no element will support same design.
 
Does the CSS generated by this tool require any external link ?

 No, no external link is required to implement the CSS. This CSS works locally with your project, no external data transfer or file is required or any type of scripting is required. No external dependency is there. 
 
What is the limitation of use ? 

No, there is no limitation of use. Any user can use any amount of times from any part of the world. The provider does not claim any limitations on using the software. 
 
Which version is CSS supported ? 

Version supported is CSS3. CSS3 is the latest version, and it will support legacy versions like CSS and CSS1 and advanced versions (if released).
 
Can my design be stolen ? 

No, you cannot steal .Users you do the work on their browser only, it does not go to the server, so you are safe.