Javascript 获取typescript中滑块的值

我试图获得typescript中滑块的值，如下所示：

我的html：

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

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

类型“Element”上不存在属性“value”

---

我做错了什么？

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

HTML

JS

函数getSliderValue（值）{
console.log（值）；
}

我在评论中解释了几乎所有内容，下面是代码：

Html:

---

您可以阅读或更好地理解

onchange

和

oninput

事件。

有太多错误的事情，我不知道从哪里开始。我建议你做一个角度的教程，首先听起来很棒哈哈。。。这个问题不是有一条简单的捷径吗？我只需要为这一件事使用typescript，这将几乎解决所有问题@CristianTraìnay您的应用程序是一个角度应用程序（即使您没有提到），因此您不需要为这一点使用typescript，您需要为所有事使用typescript。模板中的

（change）

关键字是一个事件绑定，因此您不需要

addEventListener

，因为它将执行相同的操作。你真的为我知道的每一个slideyes附加了一个新的事件监听器，其余的也在typescript中，这就是为什么我要寻找一个typescript而不是JavaScript解决方案（如果有的话）。。。我的意思是，获取滑块值几乎可以解决我所有的问题@CristianTraìnaYou不需要使用

querySelector

查询dom这在Angular中是一种不好的做法。有几种方法可以获取对元素的引用，例如，可以传递

$event

参数。最后，不要使用

var

用FF（firefox）检查这个解决方案，这不适用于所有浏览器。请再次检查所有浏览器。@Damodhar我看Firefox没有任何问题，是吗？请随时更新我的答案，以备不时之需。也可以直接使用

valueAsNumber

属性而不是普通的

value

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

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

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

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

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