HTML5 Meter Element

Developer
Pankaj Parashar
Size
2,732 Kb
Views
62,744
  1. HTML5 Meter Element Previews
  2. HTML5 Meter Element HTML Codes
  3. HTML5 Meter Element CSS Codes
  4. HTML5 Meter Element JS Codes

How do I make an html5 meter element?

Stupid little playground to tweak internal attributes of HTML5 meter element.. What is a html5 meter element? How do you make a html5 meter element? This script and codes were developed by Pankaj Parashar on 12 August 2022, Friday.

HTML5 Meter Element Previews
IQ Test

HTML5 Meter Element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Meter Element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>html5 meter element</h1>
<meter id="meter" value=".5" max="1" max="0" high=".75" low=".25"></meter>
<p>Note:- Edit the code below for fun! to tweak the meter gauge above.</p>
<div class="live-code"> &lt;meter max=<input id="max" value="1.0" maxlength="3"> min=<input id="min" value="0.0" maxlength="3"> value=<input id="value" value="0.5" maxlength="3"> high=<input id="high" value=".75" maxlength="3"> low=<input id="low" value=".25" maxlength="3"> optimum=<input id="optimum" value="0.5" maxlength="3">&gt;&lt;/meter&gt;
</div>
<dl> <dt> Case 1 - No attributes <xmp><meter></meter></xmp> </dt> <dd><meter></meter></dd> <dt> Case 2 - value < max (default: min=0, max=1) <xmp><meter value=".5"></meter></xmp> </dt> <dd><meter value=".5"></meter></dd> <dt> Case 3 - value = max (default: min=0, max=1) <xmp><meter value="1"></meter></xmp> </dt> <dd><meter value="1"></meter></dd> <dt> Case 4 - value > max (default: min=0, max=1) <xmp><meter value="5"></meter></xmp> </dt> <dd><meter value="5"></meter> <span>(if value > max then value = max)</span></dd> <dt> Case 5 - value < min (default: min=0, max=1) <xmp><meter value="-.5"></meter></xmp> </dt> <dd><meter value="-.5"></meter> <span>(if value < min then value = min)</span></dd> <dt> Case 6 - value = min (default: min=0, max=1) <xmp><meter value="0"></meter></xmp> </dt> <dd><meter value="0"></meter></dd> <dt> Case 7 - value > min (default: min=0, max=1) <xmp><meter value=".5"></meter></xmp> </dt> <dd><meter value=".5"></meter></dd> <dt> Case 8 - value < high (default: min=0, max=1) <xmp><meter value=".5" high=".8"></meter></xmp> </dt> <dd><meter value=".5" high=".8"></meter></dd> <dt> Case 9 - value = high (default: min=0, max=1) <xmp><meter value=".8" high=".8"></meter></xmp> </dt> <dd><meter value=".8" high=".8"></meter></dd> <dt> Case 10 - value > high (default: min=0, max=1) <xmp><meter value=".9" high=".8"></meter></xmp> </dt> <dd> <meter value=".9" high=".8"></meter> <span>(if value > high then notice how the color changes)</span> </dd> <dt> Case 11 - value < low (default: min=0, max=1) <xmp><meter value=".15" low=".25"></meter></xmp> </dt> <dd> <meter value=".15" low=".25"></meter> <span>(if value < low then notice how the color changes)</span> </dd> <dt> Case 12 - value = low (default: min=0, max=1) <xmp><meter value=".25" low=".25"></meter></xmp> </dt> <dd><meter value=".25" low=".25"></meter></dd> <dt> Case 13 - value > low (default: min=0, max=1) <xmp><meter value=".5" low=".25"></meter></xmp> </dt> <dd> <meter value=".5" low=".25"></meter> </dd> <dt> Case 14 - optimum < low < high (default: min=0, max=1) <xmp><meter low=".25" optimum=".15" high=".75" value=".5"></meter></xmp> </dt> <dd> <meter low=".25" optimum=".15" high=".75" value=".5"></meter> <span>(if optimum < low then notice how the color changes)</span> </dd> <dt> Case 15 - low < optimum < high (default: min=0, max=1) <xmp><meter low=".25" optimum=".5" high=".75" value=".5"></meter></xmp> </dt> <dd> <meter low=".25" optimum=".5" high=".75" value=".5"></meter> </dd> <dt> Case 16 - low < high < optimum (default: min=0, max=1) <xmp><meter low=".25" optimum=".85" high=".75" value=".5"></meter></xmp> </dt> <dd> <meter low=".25" optimum=".85" high=".75" value=".5"></meter> <span>(if optimum > high then notice how the color changes)</span> </dd> <dt> Case 17 - value < low < high < optimum (default: min=0, max=1) <xmp><meter low=".25" optimum=".8" high=".75" value=".2"></meter></xmp> </dt> <dd> <meter low=".25" optimum=".8" high=".75" value=".2"></meter> <span>(if value < low and optimum > high then notice how the color changes)</span> </dd> <dt> Case 18 - value > high > low > optimum (default: min=0, max=1) <xmp><meter low=".25" optimum=".2" high=".75" value=".8"></meter></xmp> </dt> <dd> <meter low=".25" optimum=".2" high=".75" value=".8"></meter> <span>(if value > high and optimum < low then notice how the color changes)</span> </dd>
</dl> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML5 Meter Element - Script Codes CSS Codes

body { font-family: Monaco, serif; font-size: 100%; margin: 0 auto; max-width: 1000px;
}
dl, dd { margin: 0 0 2.5em;
}
xmp { background: #ff8; border: 1px dotted #888; font: 100%/1.75 Consolas, Monaco, monospace; word-spacing: 0; letter-spacing: 0; padding: .5em;
}
h1 { border-bottom: 1px solid #ccc; padding-bottom: .5em; margin-bottom: 2.5em;
}
span { color: #c00; font-size: 100%;
}
#meter { margin: 0 auto 4.5em; width: 450px; height: 50px; display: block;
}
.live-code { margin: 1em auto 3.5em; dispay: block; font-size: 1.25em; padding: .5em; background-color: #ddd; text-align: center;
}
input { border: none; background-color: #ddd; border-bottom: 1px dotted #333; width: 35px; line-height: 1.5; font-size: 1em; color: #c00;
}

HTML5 Meter Element - Script Codes JS Codes

$(document).ready(function(){ $('#max').on('input', function() { $('#meter').prop('max', $('#max').val()) }); $('#min').on('input', function() { $('#meter').prop('min', $('#min').val()) }); $('#value').on('input', function() { $('#meter').prop('value', $('#value').val()) }); $('#high').on('input', function() { $('#meter').prop('high', $('#high').val()) }); $('#low').on('input', function() { $('#meter').prop('low', $('#low').val()) }); $('#optimum').on('input', function() { $('#meter').prop('optimum', $('#optimum').val()) });
});
HTML5 Meter Element - Script Codes
HTML5 Meter Element - Script Codes
Home Page Home
Developer Pankaj Parashar
Username pankajparashar
Uploaded August 12, 2022
Rating 3.5
Size 2,732 Kb
Views 62,744
Do you need developer help for HTML5 Meter Element?

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!

Pankaj Parashar (pankajparashar) Script Codes
Name
Arsenal vs Tottenham - Match Day 3
Password strength meter
Pure CSS Calendar Icon
Deconstruction of Twitter Logo
Reading Position Indicator
Webkit Scrollbars
Skillset using HTML5 progress bars with CSS3 animations
Animated Color Schemes
OSX-style Disk Usage
3D Pie Chart using amCharts.js
Create amazing web content with AI!

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!