CODEWITHSUNDEEP
javascripthtmljquery
cdng_360
cdng_360

Reputation: 1

How to set value of a slider element with Javascript?

I'm in the middle of an RPA project where I need to upload files to a platform (not my site) and then need to adjust the slider to a certain value.

enter image description here

Now in order to automate this, there is the option for me to use a "Javascript Function", which I intend to use eventually. However, to solve this problem I first need to be able to execute the correct code in the browser console.

Here's the code:

<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>

I've tried various simple Javascript approaches like document.querySelector("input[type='range']");

However, I now found out that this uses jQuery, which I have no knowledge of.

So I was thinking someone could show me the code of how I can set the "input value" and thus move the slider. Any ideas?

Upvotes: 0

Views: 10535

Answers (2)

dale landry
dale landry

Reputation: 8610

As per your initial issue, if you only want the slider to be at 25%, then use value="25", no need for a decimal there... To set the value of any input type using JavaScript all you need to do is reference the value attribute using JavaScript, no JQuery needed. You can use many methods of selector methods. In my example, I use getElementById() and reference the id to target the element and then use .value to set the value. I use an event listener as an example for mouseenter and mouseout as that is easy to show the value being modified.

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">

Reference by 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>

By tag name:

// 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">

Upvotes: 0

Eduardo Robles
Eduardo Robles

Reputation: 515

You don't need jquery for this. document.querySelector is plain js. Try using classnames like document.querySelector('.MuiSlider-rail').

Note that special characters need to be scaped. See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Upvotes: 2

Related Questions