我如何做出看起来像圆的输入(用于选择0到100%)?

问题描述 投票:-3回答:1

我想做出一个可以在0%100%之间移动的圆形输入。我需要能够读取圆形滑块当前处于哪个值/百分比。

我已经使用HTML和CSS设置了黑圈。 HTML由Javascript代码动态创建。我没有的是红色部分。

我只是真的要结束了。有谁知道如何做到这一点?

What I need, an circular input.

.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>
javascript html jquery css
1个回答
0
投票

https://github.com/aterrien/jQuery-Knob

使用它就可以了!我尝试,很酷正在使用名为jQuery的框架,该框架是用javascript]制成的>

© www.soinside.com 2019 - 2024. All rights reserved.