使用HTML5中的<meter>元素可以轻松地创建可视化的范围指示器。<meter>元素有两个必需属性：value和max。value属性表示当前值，max属性表示最大值。
范围指示器可以使用<meter>元素的min属性来设置最小值。同时，可以使用<meter>元素的low、high和optimum属性来设置不同范围的颜色。
以下是使用<meter>元素创建可视化的范围指示器的示例代码：
<meter value="70" min="0" max="100" low="30" high="80" optimum="90"></meter>在上面的代码中，value属性设置为70，min属性设置为0，max属性设置为100。low属性设置为30，high属性设置为80，optimum属性设置为90。这意味着范围指示器将在30以下显示低级别颜色，在30到80之间显示中级别颜色，在80到90之间显示高级别颜色，在90以上显示最优秀的颜色。
可以通过CSS样式表来设置<meter>元素的样式，例如：
meter {
width: 200px;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
meter::-webkit-meter-bar {
background-color: #eee;
border-radius: 5px;
}
meter::-webkit-meter-optimum-value {
background-color: #0f0;
border-radius: 5px;
}
meter::-webkit-meter-suboptimum-value {
background-color: #ff0;
border-radius: 5px;
}
meter::-webkit-meter-even-less-good-value {
background-color: #f00;
border-radius: 5px;
}在上面的代码中，<meter>元素的样式设置为200像素宽和20像素高，有1像素的灰色边框和5像素的圆角。::-webkit-meter-bar选择器设置<meter>元素的背景色为浅灰色。::-webkit-meter-optimum-value选择器设置最优秀的颜色为绿色，::-webkit-meter-suboptimum-value选择器设置中级别颜色为黄色，::-webkit-meter-even-less-good-value选择器设置低级别颜色为红色。
范围指示器是一种非常有用的工具，可以将数据可视化，使其更易于理解。使用HTML5中的<meter>元素可以轻松创建范围指示器，并使用CSS样式表进行自定义。