角度滑块- 'value‘在类型'HTMLElement’上不存在
角度滑块- 'value‘在类型'HTMLElement’上不存在
提问于 2020-06-05 11:55:13
我创建了一个输入滑块。当我沿着条滑动时，它会显示一个数值。我的代码可以很好地与javaScript配合使用：sample in jsfidder
但是当我把它带到Angular时，它就不工作了！请看一下my sample here
请帮帮忙。谢谢
HTML
<div class="range-wrap">
<input id="range" type="range" min="1" max="100" value="1" step="1" (change)="onChangeDevidesRange()">
<div class="devices-range-value" id="devices-range"></div>
</div>.ts
onChangeDevidesRange() {
const
range = document.getElementById('range[value]'),
devicesRange = document.getElementById('devices-range'),
setValue = ()=>{
const
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
newPosition = 10 - (newValue * 0.2);
devicesRange.innerHTML = `<span>${range.value}</span>`;
devicesRange.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue); document.getElementById("range").oninput = function() { this.style.background =‘线性渐变(右，红色0%，’+ this.value + '%，#fff‘+ this.value + '%，白色100%)’}
CSS
.range-wrap{
/* width: 500px; */
position: relative;
}
#range {
width: 100%;
}
.devices-range-value{
position: absolute;
top: 30px;
}
.devices-range-value span{
width: 30px;
height: 24px;
line-height: 24px;
text-align: center;
background: white;
color: #000;
font-size: 12px;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}回答 1
Stack Overflow用户
发布于 2020-06-05 12:10:48
尝试在Angualr中使用elementRef处理Dom内容：
import { Component, VERSION , ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(private elementRef: ElementRef){
}
onChangeDevidesRange() {
const
range = this.elementRef.nativeElement.querySelector('#range'),
devicesRange = this.elementRef.nativeElement.querySelector('#devices-range'),
setValue = ()=>{
const
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
newPosition = 10 - (newValue * 0.2);
devicesRange.innerHTML = `<span>${range.value}</span>`;
devicesRange.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
this.elementRef.nativeElement.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62207873
复制相关文章
相似问题
腾讯云开发者
