html - How to set value of a slider element with Javascript? - Stack Overflow

admin管理员组

文章数量:1023758

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.

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?

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.

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?

• javascript
• html
• jquery

Share Improve this question Follow edited Jun 10, 2020 at 2:36 Joundill 7,6651313 gold badges3838 silver badges5353 bronze badges asked Jun 10, 2020 at 1:03 cdng_360cdng_360 111 gold badge11 silver badge11 bronze badge

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/en-US/docs/Web/API/Document/querySelector

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

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.

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?

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.

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?

• javascript
• html
• jquery

Share Improve this question Follow edited Jun 10, 2020 at 2:36 Joundill 7,6651313 gold badges3838 silver badges5353 bronze badges asked Jun 10, 2020 at 1:03 cdng_360cdng_360 111 gold badge11 silver badge11 bronze badge

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/en-US/docs/Web/API/Document/querySelector

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

本文标签： htmlHow to set value of a slider element with JavascriptStack Overflow