js实现自定义htmlelement实现可拖拽圆环取值器仪表盘效果代码-html代码-BFW代码库

js实现自定义htmlelement实现可拖拽圆环取值器仪表盘效果代码

代码语言：html

所属分类：选择器

代码描述：js实现自定义htmlelement实现可拖拽圆环取值器仪表盘效果代码，支持拖拽需改值。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
form {
  --circular-range-w: 320px;
  font-family: system-ui, sans-serif;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
  margin-inline: auto;
  max-width: 1024px;
}

label {
	display: grid;
  font-weight: 700;
	place-content: center;
	width: 100%;
}

.bottom-arc {
	--circular-range-output-as: start;
	--circular-range-output-gr: 4;
	clip-path: inset(40% 0 0 0);
	margin-top: -140px;
}

.top-arc {
	clip-path: inset(0 0 40% 0);
	margin-bottom: -120px;
}

.full-circle,
.left-arc,
.oven {
	--circular-range-output-as: center;
	--circular-range-output-gr: 3;
}
</style>



  
  
</head>

<body translate="no">
  <form>
  <label id="speedometer-label">Speedometer
    <circular-range active-label="90" class="speedometer" aria-labelledby="speedometer-label" enable-min end="500" indices="50" labels="0:0,20:20,40:40,60:60,80:80,100:100,120:120,140:140,160:160,180:180,200:200" max="200" min="0" shift-step="10" start="220" suffix=" km" value="90">
    </circular-range>
  </label>

  <label id="full-circle-label">Full Circle
    <circular-range class="full-circle" aria-labelledby="full-circle-label" labels="0:0,5:5,10:10,15:15,20:20,25:25,30:30,35:35,40:40,45:45,50:50,55:55,60:60,65:65,70:70,75:75,80:80,85:85,90:90,95:95,100:0" value="50" min="0" max="100" suffix="%" step="5" indices="21"></circular-range>
  </label>

  <label id="oven-label">Oven
    <circular-range class="oven" aria-labelledby="oven-label" value="110" min="0" max="330" suffix="°C" step="5" start="20" end="340" indices="67" labels="0:0,20:20,40:40,60:60,80:80,100:100,120:120,140:140,160:160,180:180,200:200,220:220,240:240,260:260,280:280,300:300,320:320"></circular-range>
  </label>

  <label id="left-arc-label">Left Arc
    <circular-range class="left-arc" reverse aria-labelledby="left-arc-label" value="50" min="0" max="100" suffix="%" step="1" start="180" end="360" indices="11"></circular-range>
  </label>

  <label id="top-arc-label">Top Arc
    <circular-range class="top-arc" aria-labelledby="top-arc-label" value="50" min="0" max="100" suffix="$" step="1" start="270" end="450"></circular-range>
  </label>

  <label id="bottom-arc-label">Bottom Arc
    <circular-range class="bottom-arc" reverse aria-labelledby="bottom-arc-label" value="50" min="0" max="100" suffix="dB" step="1" start="90" end="270"></circular-range>
  </label>
</form>
  
    <script type.........完整代码请登录后点击上方下载按钮下载查看