如何通过 API 自动调整范围输入？

问题描述

我正在开发一个滑块，通过 API 控制灯具。

如果我想知道夹具的状态，我可以从 API 请求它。这给了我一个 0 到 100 之间的值。这个值可能会改变，因为有人在不同的地方操作灯。使用 JavaScript，我可以通过轮询 API 在文本框中获取此值。但是我无法使用范围滑块完成它。这个不动。谁能帮我完成这件事？当然，无需提交页面。

为了完成下面的示例，我将 API 更改为一个 PHP 文件，其中包含一个实际上执行完全相同操作的简单代码。

random.PHP

<?PHP echo rand(1,100); ?>

我的脚本

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
let url="http://127.0.0.1/random.PHP"
async function refreshh() {
    btn.disabled = true;
    document.getElementById("rangeInput").value = await(await fetch(url)).text();
    document.getElementById("amount").value = await(await fetch(url)).text();
    setTimeout(refreshh,3000);}
document.addEventListener("DOMContentLoaded",function() {
    refreshh();
});
</script>
<button hidden="" id="btn" onclick="refreshh()"> </button>
<input id="rangeInput" type="range"  min="0" max="100" oninput="amount.value=rangeInput.value" />
<input id="amount" type="text"  oninput="rangeInput.value=amount.value" />

输出是“文本”框有效，但滑块无效。

希望有人能帮帮我。

干杯。

解决方法

我自己弄明白了。问题是我无法将文本值解析为滑块，它必须是 INT。

let url="http://127.0.0.1/random.php";
async function refreshh() {
    btn.disabled = true;
    
    var result =  await(await fetch(url)).text();
    
    document.getElementById("rangeInput").value =  parseInt(result);
    document.getElementById("amount").value = result;
    
    setTimeout(refreshh,3000);}
document.addEventListener("DOMContentLoaded",function() {
    refreshh();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button hidden="" id="btn" onclick="refreshh()"> </button>
<input id="rangeInput" type="range"  min="0" max="100" oninput="amount.value=rangeInput.value" />
<input id="amount" type="text"  oninput="rangeInput.value=amount.value" />