We Keep Coding

How to format the <output> of a type range slider?

I am trying to format the range slider so the result appear duplicated.
For eg. it returned 16 by default. I want under the slider to see 16x16, 32x32...Both numbers must move togheter.
Heres what i tried:
<input type="range" min="2" max="50" value="16" class="size"
oninput="this.nextElementSibling.value = this.value">
<output>16</output
Is there a way to format the output?
Thank you

<input type="range" min="2" max="50" value="16" class="size" oninput="this.nextElementSibling.innerHTML = `${this.value}x${this.value}`"><output></output>

How to display input value on page in Javascript?

How to display input value on the website? I already tried to display it but when I change the value of the input, the display is still the same.
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

What you did puts the value of the input in the paragraphe on load. Plus you need an EventListener in order to track the input changes, like so:
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
rangeInput.addEventListener("input", ()=>{
valueInp.innerHTML = rangeInput.value;
})
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
rangeInput.addEventListener("input", () => {
valueInp.textContent = rangeInput.value;
});
valueInp.textContent = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>```

Provided that the <p> element for the value will always be following directly after your range element then the following script will take care of any number of range/value combinations:
document.querySelectorAll(".range")
.forEach(r=>r.addEventListener("input",update(r)));
function update(r){
const ur= ()=>r.nextElementSibling.textContent=r.value;
ur();
return ur;
}
<input type="range" min="1" max="100" value="40" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="20" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="30" step="1" class="range"/>
<p></p>

Try this :
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
range.addEventListener("change",()=>{
valueInp.innerHTML = rangeInput.value;
})
valueInp.innerHTML = rangeInput.value;
addEventListener here will be executed whenever value inside input tag is changed .

You need to wire-up an event-listener on the <input/> which then updates the <p class="value"> in the event-handler.
You can only wire-up event-handlers after DOMContentLoaded btw.
There are two main events you can listen to:
Use the 'input' event to respond to every change-in-value, even while the <input> element has focus.
Use the 'change' event to only respond to changes when the user has stopped interacting with the input.
BTW, you should use an <output> element instead of <p> for showing "output" values.
You should use id to select specific elements instead of .className selectors because class="" is not unique.
Never use innerHTML for showing text as it opens you up to XSS attacks.
For <output> you can set HTMLOutputElement.value.
For all other elements, use textContent.
Or innerText.
Like so:
window.addEventListener( 'DOMContentLoaded', onDomLoaded );
function onDomLoaded() {
const rangeInput = document.getElementById('myRangeInput');
const output = document.getElementById('myOutput');
// Show initial value immediately:
output.textContent = rangeInput.value;
// 'input' is the name of the event-type, not the <input> element name.
// you can also use 'change' instead.
rangeInput.addEventListener( 'input', e => {
output.textContent = rangeInput.value;
} );
}
<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" class="range"/>
<output id="myOutput" for="myRangeInput"></output>
If you want something really succinct, then just update the <output> dire use a named <output> the oninput="" attribute, like so:
<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" oninput="document.getElementById('myOutput').value = this.value;" />
<output id="myOutput" for="myRangeInput"></output>

Focus/unfocus an input on range slider handler's use

I have a form where the inputs values are controlled by range sliders. There's a calculation every time there's a new entry on each input which operates on focusout.
Though, the calculation doesn't work when only the range sliders are used. Is there a way to focus the inputs while using the range sliders? I can't change the way of calculation, because, it's on all the inputs. So, it has to be this way.
My form is bigger, but, here's an example of what I have:
<label class="va1">Option a price 1:<input id="a1" type="number"/></label>
<input type="range" id="slider-a1" min="0" max="100" step="1" value="0"><br>
<label class="va2">Option a price 2:<input id="a2" type="number"/></label>
<input type="range" id="slider-a2" min="0" max="100" step="1" value="0"><br>
<label>Result:</label><input id="a5" type="text" name="total_amt"/>
And here's the JS:
var opt_1 = document.getElementById("slider-a1");
opt_1.oninput = function() {
document.getElementById("a1").value = opt_1.value;}
var opt_2 = document.getElementById("slider-a2");
opt_2.oninput = function() {
document.getElementById("a2").value = opt_2.value;}
calculate = function(){
var optiona1, optiona2, resultss;
optiona1 = Number(document.getElementById("a1").value);
optiona2 = Number(document.getElementById("a2").value);
resultss = parseInt(optiona1)+parseInt(optiona2);
document.getElementById('a5').value = resultss;}
$('input[type=number]').on('focusout', calculate);

Range Slider with direct number input

Is it possible to utilise a range slider in a form field and also allow a user to input the value through typing a number, i.e. having input type="range" and input type="number" on the same form field with the one utilised overriding the other?
Ok, so in response to the below here is my code:
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />
JavaScript:
function showValue1(newValue) {
document.getElementById("monday").innerHTML=newValue;
}
At the moment the range slider changes and outputs the number selected at the end of the label however some users are complaining that the slider is too fiddly and would like to enter the number directly through a number input. Is this possible?

You can make the range value change according to the input value using onkeyup event with the input, here's what you will need:
HTML:
JS:
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
Demo:
function showValue1(newValue) {
document.getElementById("monday").innerHTML= newValue;
}
function changeRangeValue(val){
document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
function changeInputValue(val){
document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
showValue1(val);
}
<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/>
<br />
<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />
Note:
You can't set the same id for multiple elements in HTML.

How to create slider with decimal values using html

I want to create a slider showing decimal values like 0.0 to 0.1 using html or html5.

Add step="0.1" in your input range tag like this: <input type="range" min="0.1" max="1.0" step="0.1" value="1"> Example:
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = this.value;
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1" id="scale">Scale:<text id="spanscale" style="inline">1</text>
If you want to show a decimal place in integer numbers you can add this piece of code in the value output: Number(this.value).toFixed(1)
document.getElementById("scale").oninput = function() {
document.getElementById("spanscale").innerHTML = Number(this.value).toFixed(1);
}
<input type="range" min="0.1" max="3.0" step="0.1" value="1.0" id="scale">Scale:<text id="spanscale" style="inline">1.0</text>

It sounds like you want an input field that the user can click arrows to increment/decrement a value in steps of 0.1. If that's the case, you want to use an HTML5 numeric input element:
<input type="number" min="0" max="1" step="0.1" value="0.5" />
Find out more here at HTML5 Goodies.

As you precise HTML5, then you can use the new input type range :
<input type="range" name="things" min="1" max="10">
Demonstration
Be aware that it doesn't work on IE9-,though.

For setting this dynamically using JavaScript:
document.getElementById("my_slider").setAttribute("step", "0.1");