angularjs输入范围写在交叉气泡内

Question

我想写在范围的气泡内，所以我修复了范围滑块的设计，我只想写在气泡编号内：

enter image description here

所以我想把数字写在圆圈里，所以我应该在 angularJS 或 javascript 代码中使用什么来写在这个圆圈内，并且用圆圈改变数字，我应该在 JavaScript 中使用哪个模型来完成所有事情。

所以我使用了这个 html：

 <input type="range" min="0" max="10000"  value="2500" />

并使用了这个 css ：

  input[type=range] {
      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
      width: 100%; /* Specific width is required for Firefox. */
      background: transparent; /* Otherwise white in Chrome */
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    input[type=range]:focus {
      outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer;

      /* Hides the slider so custom styles can be added */
      background: transparent; 
      border-color: transparent;
      color: transparent;
    }



    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* border: 1px solid #000000; */
      border-radius: 50% !important;
      height: 60px;
      width: 60px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
      margin-top: -28px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
      /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; Add cool effects to your sliders! */
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid #000000;
      height: 36px;
      width: 16px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
    }

    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      border: 1px solid #000000;
      height: 36px;
      width: 16px;
      border-radius: 3px;
      background: #ffa200;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      cursor: pointer;
      /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
      background: #000;
      border-radius: 1.3px;
      /* border: 0.2px solid #010101; */
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
      background: #000;
    }

    input[type=range]::-moz-range-track {
      width: 100%;
      height: 8.4px;
      cursor: pointer;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
      background: #000;
      border-radius: 1.3px;
      border: 0.2px solid #010101;
    }

    input[type=range]::-ms-track {
      width: 100%;
      height: 8.4px;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      border-width: 16px 0;
      color: transparent;
    }
    input[type=range]::-ms-fill-lower {
      background: #2a6495;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: #3071a9;
    }
    input[type=range]::-ms-fill-upper {
      background: #3071a9;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-upper {
      background: #367ebd;
    }


    input[type=range] {
      -webkit-appearance: none;
      margin: 18px 0;
      width: 100%;
    }
    input[type=range]:focus {
      outline: none;
    }

所以希望有人能在这方面提供帮助......

Answer 1

我假设您必须有一个标签才能在圆圈内打印值。现在您所需要的只是记录的实时值。你可以修改你的input 有点像：

<input type="range" min="0" max="10000"  value="2500" ngModel="data" />

在 angularjs 一侧，在控制器内部，定义 $scope.data 并在圆圈内，只需将 {data} 与您的标签一起使用。这应该没问题