Range bar with indicator
How do I make an range bar with indicator?
What is a range bar with indicator? How do you make a range bar with indicator? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Range bar with indicator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Range bar with indicator</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 14px; font-family: Arial, sans-serif;
}
.range-gauge { padding: 50px 20px;
}
.range-bar { height: 10px; background: #ddd; position: relative;
}
.range-bar .bar { background: blue; width: 20px; position: absolute; top: 0; bottom: 0; opacity: 0.7; border-left: 1px solid #ddd; border-right: 1px solid #ddd;
}
.range-bar .bar .labels { table-layout: fixed; margin-top: 10px; width: 100%; display: table; font-size: 70%;
}
.range-bar .bar .labels > span { display: table-cell; text-align: center; line-height: 100%; padding: 3px;
}
.range-bar .bar .labels > span:first-child { text-align: left;
}
.range-bar .bar .labels > span:last-child { text-align: right;
}
.range-bar .bar:hover { opacity: 1;
}
.range-bar .gauge-bubble { width: 100px; margin-left: -50px; position: absolute; text-align: center; bottom: 100%; padding: 6px 0;
}
.range-bar .gauge-bubble .lbl { padding: 5px; border-radius: 5px; line-height: 100%; text-align: center; display: inline-block; background: blue; color: white;
}
.range-bar .gauge-bubble .lbl small { text-transform: uppercase; font-size: 0.6rem;
}
.range-bar .gauge-bubble .lbl:after { position: absolute; bottom: 0; left: 50%; margin-left: -8px; display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 8px 0 8px; border-color: blue transparent transparent transparent;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="range-gauge"> <div class="range-bar"> <div class="gauge-bubble" style="left:30%"> <div class="lbl"> <div> <b> $55.00</b> </div> <small>Current Price</small> </div> </div> <div class="bar" style="left:0%;width:100%;background-color:blue"> <div class="labels"> <span>Min</span> <span>Max</span> </div> </div> <div class="bar" style="left:10%;width:50%;background-color: red"></div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
</body>
</html>
Range bar with indicator - Script Codes CSS Codes
html { font-size: 14px; font-family: Arial, sans-serif;
}
.range-gauge { padding: 50px 20px;
}
.range-bar { height: 10px; background: #ddd; position: relative;
}
.range-bar .bar { background: blue; width: 20px; position: absolute; top: 0; bottom: 0; opacity: 0.7; border-left: 1px solid #ddd; border-right: 1px solid #ddd;
}
.range-bar .bar .labels { table-layout: fixed; margin-top: 10px; width: 100%; display: table; font-size: 70%;
}
.range-bar .bar .labels > span { display: table-cell; text-align: center; line-height: 100%; padding: 3px;
}
.range-bar .bar .labels > span:first-child { text-align: left;
}
.range-bar .bar .labels > span:last-child { text-align: right;
}
.range-bar .bar:hover { opacity: 1;
}
.range-bar .gauge-bubble { width: 100px; margin-left: -50px; position: absolute; text-align: center; bottom: 100%; padding: 6px 0;
}
.range-bar .gauge-bubble .lbl { padding: 5px; border-radius: 5px; line-height: 100%; text-align: center; display: inline-block; background: blue; color: white;
}
.range-bar .gauge-bubble .lbl small { text-transform: uppercase; font-size: 0.6rem;
}
.range-bar .gauge-bubble .lbl:after { position: absolute; bottom: 0; left: 50%; margin-left: -8px; display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 8px 0 8px; border-color: blue transparent transparent transparent;
}
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 3,312 Kb |
Views | 28,336 |
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!
Name | Size |
Progress bars with colour change. | 3,845 Kb |
Player Flip Cards | 4,314 Kb |
60fps animated SVG waves hero | 3,268 Kb |
XSellco SVG animated logo | 4,358 Kb |
Subtle site navigation with description | 3,206 Kb |
SVG Clock | 2,163 Kb |
Gallery with blur slide up info on hover | 2,172 Kb |
Simple fluid navigation with 4 hover effects | 3,336 Kb |
Simple grid layout | 1,978 Kb |
4 color border for highlighting feature elements | 4,105 Kb |
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!
Name | Username | Size |
Weather App | OmranAbazid | 2,596 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Shopping List | Markmurray | 6,015 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Count up | Alanshortis | 2,391 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Sass Radar | Jlong | 6,887 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!