Question

我试图按如下方式获取打字稿中滑块的值：

我的html：

<input id="width" type="range" value="250" min="50" max="500" (change)="getSliderValue()" />

我在component.ts中的打字稿代码：

getSliderValue() {
var slider = document.querySelector("#width");
slider.addEventListener('change', () => {
      var data = slider.value
});
}

但是，我在slider.value上出现以下错误：

类型“元素”上不存在属性“值”

我在做什么错了？

Answer 1

我在注释中解释了几乎所有内容，这是代码：

HTML：

<input id="width" type="range" value="250" min="50" max="500" (change)="getSliderValue($event)" (oninput)="getSliderValue($event)"  />

component.ts：

getSliderValue(event) {
   console.log(event.target.value);
}

您可以阅读this article或this question，以更好地了解onchange和oninput事件。

Answer 2

您还需要添加oninput事件以列出滑块值更改事件。

HTML

<input id="width" type="range" value="250" min="50" max="500" (change)="getSliderValue(this.value)"  oninput="getSliderValue(this.value)"  />

JS

<script>
function getSliderValue(value) {
      console.log(value);
}
</script>