Suppose, I want to specify (highlight) the range of meter tag from 0.4 to 0.6 values. How can I do that?
<meter max="0.6" min="0.4"></meter>
I want to do something like this:
Meter with range
You can set the background
of your meter
, in our case it has a lightgray
color up to 40%, changes to green
and keeps it that way up to 60% from whence it turns to lightgray
again.
meter {
background: linear-gradient(
90deg,
lightgray 40%,
green 40%,
green 60%,
lightgray 60%
);
border-radius: 10px;
border: 1px solid grey;
}
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="0">at 50/100</meter>
You can also programmatically change it, like here
let state = {
lower: 40,
greater: 60
}
function change(what, how) {
state[what] += how;
let {lower, greater} = state;
document.getElementById("fuel").style.background = `
linear-gradient(
90deg,
lightgray ${lower}%,
green ${lower}%,
green ${greater}%,
lightgray ${greater}%
)
`;
}
#fuel {
background: linear-gradient(
90deg,
lightgray 40%,
green 40%,
green 60%,
lightgray 60%
);
border-radius: 10px;
border: 1px solid grey;
}
<input type="button" value="<" onclick="change('lower', -1)">
<input type="button" value=">" onclick="change('lower', 1)">
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="0">at 50/100</meter>
<input type="button" value="<" onclick="change('greater', -1)">
<input type="button" value=">" onclick="change('greater', 1)">
Each time you click an arrow, the lower bound changes if one of the first two is the one you clicked, otherwise the greater bound will be changed.