如何使用 Javascript 设置 slider 元素的值？

Question

我正在进行一个 RPA 项目，我需要将文件上传到一个平台（不是我的站点），然后需要将 slider 调整为某个值。

现在为了自动执行此操作，我可以选择使用“Javascript 函数”，我打算最终使用它。 但是，要解决这个问题，我首先需要能够在浏览器控制台中执行正确的代码。

这是代码：

<span class="MuiSlider-root jss1 MuiSlider-colorPrimary">
    <span class="MuiSlider-rail jss6"></span>
    <span class="MuiSlider-track jss5" style="left: 0%; width: 24.2424%;"></span>
    <input value="0.25" style="background-color: rgb(255, 255, 255);" winautomationoriginalcolor="rgb(255, 255, 255)" type="hidden">
        <span class="MuiSlider-thumb jss2 MuiSlider-thumbColorPrimary jss26 jss25" tabindex="0" role="slider" style="left: 24.2424%;" data-index="0" aria-orientation="horizontal" aria-valuemax="1" aria-valuemin="0.01" aria-valuenow="0.25">
            <span class="jss27 MuiSlider-valueLabel jss4">
                <span class="jss28">
                    <span class="jss29">25%</span>
                </span>
            </span>
        </span>
    </input>
</span>

我尝试了各种简单的 Javascript 方法，例如document.querySelector("input[type='range']");

但是，我现在发现这使用了我不知道的jQuery。

所以我在想有人可以告诉我如何设置“输入值”的代码，从而移动 slider。有什么想法吗？

Answer 1

为此，您不需要 jquery。 document.querySelector是纯 js。 尝试使用像document.querySelector('.MuiSlider-rail')这样的类名。

请注意，特殊字符需要转义。 参见https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

根据您的初始问题，如果您只希望 slider 为 25%，则使用value="25" ，那里不需要小数...要使用JavaScript设置任何输入类型的值，您需要做的就是是使用 JavaScript 引用值属性，不需要 JQuery。 您可以使用多种选择器方法。 在我的示例中，我使用getElementById()并引用id来定位element ，然后使用.value来设置值。 我使用事件侦听器作为mouseenter和mouseout的示例，因为这很容易显示正在修改的值。

 let range = document.getElementById('rangeElement'); range.addEventListener('mouseenter', function(){ range.value = '100'; }) range.addEventListener('mouseout', function(){ range.value = '50'; })

 <input type="range" min="1" max="100" value="50" class="slider" id="rangeElement">

class参考：

 let range = document.getElementsByClassName('slider'); let button = document.getElementsByTagName('button'); // using an event listener on the button and listening for a click // when clicked, the value for the range slider will be set to '90' // reference the key of the element/s as the selector method used could have more than one element. button[0].addEventListener('click', function() { range[0].value = 90; })

 <input type="range" min="1" max="100" value="0" class="slider" id="rangeElement"> <button>Press me</button>

按标签名称：

 // input set to a value of '50' in HTML let range = document.getElementsByTagName('input'); // with a selector method that can select more than one element you must reference the // elements key value, in this case there is only one input tag, so we reference the first key // which is 0 range[0].value = 15;

 <input type="range" min="1" max="100" value="50" class="slider" id="rangeElement">