如何使用 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">