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

Posted 2023-03-06

【中文标题】angularjs输入范围写在交叉气泡内

【英文标题】：angularjs input range write inside the crossing bubble

【发布时间】：2019-05-09 00:43:04

【问题描述】：

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

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;
    

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

【参考方案1】：

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

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

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

【讨论】：

我要在圈内写字

你有圈内书写的代码吗？我的意思是除了实际数据。你有必要的html标签吗？

如果你想用标签写它，你可以在圆圈区域内使用<span>data</span>。这将实时更新值

但抱歉，这是范围滑块，所以我知道我可以放跨度或者我不知道，但对我来说困难的是在圆圈中写下范围内的数字

我在描述中有一张图片