What is Range Input range in HTML ?
Range Input is a control that is present from very early version of HTML. Input Range is generally use for selecting range value , for example
- I can set price range from 0 to 1000
- I can set audio volume
- I can calculate loan amount or interest rate
For example here is a color code range , the color code can be from 0 to 255 of Red , Green and Blue. Three color code is present there , user have to set , user change the color code value , the final color will be displayed. Thus HTML range is an essential for Web Development and Web Application.
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 define the maximum(255) and step define the amount of value in each step , here set one(1) .One thing must be noted that HTML Input Range also support custom attribute , For example , I have attribute called 'sonjukta'. The example how custom attribute 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 Range appear differently in different Browser , when you open in Mozilla and Chrome , you will notice the two design are different , that is the challenging portion for a Web Designer to keep the consistency of design throughout the browser. This required pseudo code for vendor specific. Range Input can be horizontal or vertical , here is the example of horizontal and vertical.
<input type="range" orient="vertical" />input[type=range][orient=vertical] {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 16px;
vertical-align: bottom;
} 
| --------------------- | ---------------- | ----------- | ------------------------ |
| 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 |
<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;
}
{
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 tool available for CSS generation but this tool have some unique features
- This tool is very fast and sophisticated.
- The tool design CSS only with required attribute , extra attribute is remove from this CSS, this make CSS very compact and useful and cost saving for the project.
- This tool can be used who have no coding experience or even an idea of Cascading Style Sheet , just drag and drop and you will get a Live Preview and you see code is ready , just Copy or Download CSS generated by the tool.
- The CSS generated by this tool is user property , the provider do not have any copyright on the CSS , you can apply it student project and as well as commercial purpose also.
- This tool is free and open source , no licensing is required and it operate on very low internet connection also.
- The tool is very safe ,user data is not stored , cookie is not present there, user do not have to create any login account or user account , just open the software and use it.
- User can set the background of Live Preview color to match with project he is working with
Future scope of the tool
- In future the tool become AI supported , user will type or comment to the tool and tool with design itself and Live Preview will be appear
- User would be able to share his work . User can design and share the link to the other person and use the receiver can open the link and see the design
- The tool in future will be multiple save option .User will able to save multiple design for his future project , the saving option will be by name.
- In future , user will require login option , if they want to save the work.
- In future another option will be added , that if user browser is closed, the user will not loose their work , local sessions storage will be handle get back the work.
- In future user will able to generate image of the control so that image can be place in their project. Image will be PNG ,JPG and other format.
- But the tool will remain free forever , provider will never charge any costing for using this tools.
No comments:
Post a Comment