我想做出一个可以在0%
和100%
之间移动的圆形输入。我需要能够读取圆形滑块当前处于哪个值/百分比。
我已经使用HTML和CSS设置了黑圈。 HTML由Javascript代码动态创建。我没有的是红色部分。
我只是真的要结束了。有谁知道如何做到这一点?
.ui-circle-device {
background: transparent;
border-radius: 50%;
border: 3px rgb(169, 169, 169) solid;
border-radius: 100%;
color: rgb(169, 169, 169);
}
.ui-circle-device {
position: relative;
display: block;
margin: 2em 0;
background-color: transparent;
text-align: center;
}
.ui-circle-device:after {
display: block;
padding-bottom: 100%;
width: 100%;
height: 0;
content: "";
}
.ui-circle-device__inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-circle-device__wrapper {
display: table;
width: 100%;
height: 100%;
}
.ui-circle-device__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
<div class="col-xs-10 col-centered" id="ui-device-content">
<div class="ui-circle-device" id="circlestatus_20200419-032914" style="border: 3px solid rgb(169, 169, 169);">
<div class="ui-circle-device__inner">
<div class="ui-circle-device__wrapper" id="device_container_full?20200419-032914/?!0/!">
<div class="ui-circle-device__content">
<h3 id="devicestatus_20200419-032914" class="h4-devicestatus-full" style="color: rgb(169, 169, 169);">
Off
</h3>
</div>
</div>
</div>
</div>
</div>
https://github.com/aterrien/jQuery-Knob
使用它就可以了!我尝试,很酷正在使用名为jQuery的框架,该框架是用javascript]制成的>