时间戳

首页 > 解决方案 > 当有步骤时，范围滑动不会达到最大值

html - 当有步骤时，范围滑动不会达到最大值

问题描述

我正在我的角度项目中设置范围滑块。范围滑块的所有值都来自 api。滑块的 Api 响应如下所示。

[{
  toolValue: { defaultvalue: 120,
               min: 30,
               max: 120,
               step: 30 }
}]

我在范围滑块中设置这些值并且滑块正在工作，但是当步长值为30或任何其他值时，滑块不会达到最大位置，而不是设置在位置 90。但是当步长为0.1时，该时间滑块设置为最大位置。不知道步骤有什么问题。

html代码：

<input type="range" class="slider" [value]="item.toolValue.defaultvalue" [min]="item.toolValue.min" [max]="item.toolValue.max" [step]="item.toolValue.step"  id="rangeslider{{index}}" (mouseup)="onMouseupRangeslider($event.target.value,item,index)">

请让我知道如何滑块图像

正如您在上图中看到的，从两个滑块中的 API 中，默认值是100和120。在第一个滑块中，步长为0.1，因此它将到达最大位置，但在第二个滑块中，步长为 30 ，因此滑块不会到达最大位置，而是停止在90。请帮我解决这个问题。谢谢滑块值的 api 响应如下所示。

[{
cols: 12
id: "dvetool0"
rows: 3
toolValue: {defaultvalue: 100, max: 100, min: 0, step: 0.1}
type: "rangeslider"
x: 0
y: 0 }, 
{
cols: 11
id: "dvetool1"
rows: 3
toolValue: {defaultvalue: 120, max: 120, min: 30, step: 30}
type: "rangeslider"
x: 0
y: 4 }]

标签： htmlangular

解决方案

更新的答案：为了在您澄清后跟进，我认为您的问题是此处使用了 [value] DOM 属性。相反，请尝试使用 ngModel 跟踪值。

在您的 component.ts 中替换[value]="default"并[(ngModel)]="inputValue"创建inputValue变量

这是一个工作的 stackblitz 作为示例：https ://stackblitz.com/edit/angular-szdxyn

顺便说一句，您看到 90 的原因是浏览器使用 rangeElem.min + (rangeElem.max - rangeElem.min)/2 计算默认值。查看 MDN 页面：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Value

推荐阅读