Good news !! A new tool came into action that will solve the long-awaited problem for fronted developers to design perfect HTML elements that will work all across the browser and device.
Designing HTML is a time consuming task , it require a lot of time and lot of patients . Nowadays , most of the housewife , small business or student create their own website , they are not able to invest on development , student create their project in HTML or for personal website , but they are not able to bear cost to hire designer , there was a need of tools , that meet fast development and free cost and it should be perfect and it will give website a professional looks.Here we will discuss one such HTML element that designing is difficult , but have a wide range of use.
Here is the HTML (Input type Range)
Example of CSS (Input type Range)
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3071A9;
border-radius: 5px;
border: 1px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 30px;
width: 15px;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3071A9;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3071A9;
border-radius: 5px;
border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 30px;
width: 15px;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3071A9;
border: 1px solid #000000;
border-radius: 10px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3071A9;
border: 1px solid #000000;
border-radius: 10px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 30px;
width: 15px;
border-radius: 5px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071A9;
}
input[type=range]:focus::-ms-fill-upper {
background: #3071A9;
}
Here is How its Look Like
"Range Input CSS Generator" is such a tool that creates CSS that makes element browser-independent and device independent.
How does it work ?
The "Range Input CSS Generator" have some control. Users need to change the control value and select the perfect option. Users will see a Range Input and changes when the control value changes. A user can adjust control value to make a perfect design for his website and the tool will generate perfect CSS for the HTML type range. To handle all the major browsers, the CSS is quite lengthy as it handles all the major browsers and most of the browsers expect special attributes.
That is why Sanjukta's "Range Input CSS Generator" is gaining popularity day by day. Every day, a lot of fronted developers come to make their HTML element design. Sonjukta's tool satisfies them.
Why should you use the "Range Input CSS Generator" ?
1) The first and foremost reason is, it is free of cost, no licensing is required, no installation is required and running all the modern browsers, it is time efficient.
2) Designing an HTML is time-consuming work, frontend developer changes in CSS save the work and open again and again in different browser to see their work is perfect or not. But "Range Input CSS Generator" shows all the changes on the fly. It saves time and makes development faster and more important. Designers need to handle separate attributes for separate browsers. "Range Input CSS Generator" writes all the attributes that run on every Browser, and it is lightweight.
3) This tool can be handled by expert to novice novies. To generate perfect CSS, you do not need to be a perfect experienced CSS designer. Even a student can generate the perfect CSS with the help of a tool. Just copy or paste or download. Your work is done.
What is a good design ?
Good design is a term that we can feel by humans, but has no definition
in any textbook. A good design maintains the elements at a moderate size
that is pleasing to the eyes of the viewer, the contrast ratio of the
elements must be pleasing to the eyes of the viewer, and it must create
likelihood to the design, so that you do not get bored with the design.
What is bad design ?
A bad design is that the element size is not proper ,does not fit to the screen and contact level is so high or low you are get improper attention to the element. A HTML element design should be good design and good looking and attractive.
"Range Input CSS Generator" is best fit for good design that size of the HTML element can be adjusted ,proper contrast of the element can be adjusted and it will be work in all the browser. That is the beauty of "Range Input CSS Generator" .
What can be done with "Range Input CSS Generator" ?
"Range Input CSS Generator" has four tabs for four different function. Range Input have separate part "thumb" and "slider" , "thumb" moves on "slider" .
First user would go to "Thumb decoration" tab , with , height , background color , shadow, border can be design from this tab.
Next "Track decoration" , here slider can we design , slider , with, height ,border radius, border type ,border style can be design. slider can be 3D also ,shadow property can be defined from this tabs.
"Track Gradient" is another tab , slider can be design as a multi color , it's look control beautiful and attracting.
Finally the three part is combined into ones CSS ,here is the example of same.
<input type=range class=YourCss />
<style>
.YourCss
{
-webkit-appearance:none;
appearance:none;
background:transparent;
cursor:pointer;
Width:250px;
Height:18px
}
.YourCss::-webkit-slider-runnable-track
{
width :250px;
height :18px;
border-radius :10px;
background-color :rgb(107, 222, 219);
background:linear-gradient(54deg,rgb(204, 53, 53),rgb(175, 235, 55));
}
.YourCss::-moz-range-track
{
width :250px;
height :18px;
border-radius :10px;
background-color :rgb(107, 222, 219);
background:linear-gradient(54deg,rgb(204, 53, 53),rgb(175, 235, 55));
}
.YourCss::-webkit-slider-thumb
{
-webkit-appearance:none;width :46px;
height :48px;
border-radius: 10px;
border-width: 4px;
border-style: dotted;
border-color: rgb(64, 128, 128);
background-color: rgb(58, 214, 34);
margin:-24.12px;
}
.YourCss::-moz-range-thumb
{
width :46px;
height :48px;
border-radius: 10px;
border-width: 4px;
border-style: dotted;
border-color: rgb(64, 128, 128);
background-color: rgb(58, 214, 34);
margin:-24.12px;
}.YourCss::-ms-fill-lower
{
width :250px;
height :18px;
border-radius :10px;
background-color :rgb(107, 222, 219);
background:linear-gradient(54deg,rgb(204, 53, 53),rgb(175, 235, 55));
}
.YourCss::-ms-fill-upper
{
width :250px;
height :18px;
border-radius :10px;
background-color :rgb(107, 222, 219);
background:linear-gradient(54deg,rgb(204, 53, 53),rgb(175, 235, 55));
}
.YourCss::-ms-thumb
{
width :46px;
height :48px;
border-radius: 10px;
border-width: 4px;
border-style: dotted;
border-color: rgb(64, 128, 128);
background-color: rgb(58, 214, 34);
margin:-24.12px;
}
</style>
Here is the Output
Silent Feature of the Tool
1) This tool is completely free and no licensing is required to use this tool , no installation is required , no prereqisit software is required. This tool do not need any hardware specification.
2) This tool is web based tool and run on every Browser in every environment. Use can use from any part of world.
3) This tool run on very slow internet connection also.
4) Another feature of this tool is , it does not depend on server , once the tool is loaded , the entier work will be on your local system , all magic happen on your browser only , so do not need to panic that code may licked.
5) Range Input CSS Generator is very lightweight and fast and create CSS with compact attribute , no unnessary attribute is included in this CSS.
6) Html Range input have Browser based psudocode , this is the list
Chrome / Edge / Safari (WebKit)
✓ Entire track area → ::-webkit-slider-runnable-track
✓ Slider thumb → ::-webkit-slider-thumb
✓ Track fill before thumb→ ::-webkit-slider-thumb::before (manual workaround)
✓ Track fill after thumb → Not directly supported (use gradient)
✓ Focus outline → input:focus::-webkit-slider-thumb
✓ Disabled state → input:disabled::-webkit-slider-thumb
Firefox (Gecko)
✓ Entire track area → ::-moz-range-track
✓ Slider thumb → ::-moz-range-thumb
✓ Track fill before thumb→ ::-moz-range-progress
✓ Track fill after thumb → ::-moz-range-track + ::-moz-range-progress
✓ Focus outline → input:focus::-moz-range-thumb
✓ Disabled state → input:disabled::-moz-range-thumb
Internet Explorer / Edge (Legacy engine)
✓ Entire track area → ::-ms-track
✓ Slider thumb → ::-ms-thumb
✓ Track fill before thumb→ ::-ms-fill-lower
✓ Track fill after thumb → ::-ms-fill-upper
✓ Tick marks → ::-ms-ticks-before / ::-ms-ticks-after
✓ Focus outline → input:focus::-ms-thumb
✓ Disabled state → input:disabled::-ms-thumb
This tool handle all the vendor specific code , so that work uniformly to all the device from desktop to laptop , mobile or mini computer also.
1) This tool do not need any login or account creation , it is free of cost and user can can used unlimited time , unlimited number of times.
2) This tool display about 30 example . user learn how CSS can be design/
3) This tool gives options Copy or Download , user can Copy the code or can Download as a text file in his computer.
4) Range Input CSS Generator do not use any cookie or local storage , the tool does not pass any browser information to the Server , this tool is 100% safe and secure.
5) The most attracting part of the tool is , Live Preview, when user change the attribute , user can see the changes on the fly and design .
6) The Code Generated by this tool is completely user property , the provider do not have any claim on the Generated Code.
How a html range input can be placed vertically ?
Html Input Range can be placed both horizontally and vertically , an attribute "writing-mode" control the orientation , just write : writing-mode: bt-lr; in your CSS , below is the example
<style>
.slider-vertical {
writing-mode: bt-lr; /* bottom to top, left to right */
-webkit-appearance: slider-vertical;
width: 8px;
height: 200px;
}
<style>
Here is the visual example
Do the tool Support Multi Thumb Range Input ?Yes , this tool support multi thumb range input . Here it the example how it look like.
Here is the the example HTMl , how it can be archive .
<div class="slider-container">
<div class="slider-track"></div>
<div class="range-highlight" id="rangeHighlight"></div>
<input type="range" id="minSlider" min="0" max="100" value="20">
<input type="range" id="maxSlider" min="0" max="100" value="80">
</div>
