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 make two different range slider inputs show the same value, whenever the user updates one of them?

So when ever the user changes the value of the range slider I want that both range sliders get updated to the same value. The same value will then be printed on the P > span. The second part is working but I can't get them to show the same value. (I want the range slider handel to be exact the same for both of them.) Extra: Is there anyway to convert this to jQuery and remove the JS part from the HTML? Thanks for your time.
HTML:
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile" onchange="updateUserMaximumReadTime(this.value);">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime" onchange="updateUserMaximumReadTime(this.value);">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>
JS: I have tested .value on the range input but it did not work.
function updateUserMaximumReadTime(val) {
document.getElementById('userMaximumReadTime').innerHTML = val;
document.getElementById('userMaximumReadTimeMobile').innerHTML = val;
}

Here's a quick example that should help get you in the right direction.
$('input[type=range]').on('change', function() {
$('input[type=range]').val($(this).val())
});
$('input[type=range]').on('change', function() {
$('input[type=range]').val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
<label for="maximumReadTime">Maximale Leestijd</label>
<input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime">
<p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>

You can make one class for both ranges. Then on update You need to call c allback function that will apply this value to other range elements.
$('.rangeSlider').range({
update : function (currentSlider){
$('.rangeSlider').range({ value : currentSlider.value });
}
});
It's example of 'how it can be done'.
When i will back home - i'm will be available to give You much wider explanation.

Javascript/html : Two input range field balance scale

How do I make these two input range fields balance to maximum 100, that when I move the first input field range the second should be adjusting too, vice versa. I mean that it should be proportional both sides like balance scale.
Here is my code https://jsfiddle.net/jsm4s2oz/1/
//First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75" oninput="judge_rangeOutput.value = judge_range.value"><br/>
//Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25" oninput="preJudge_rangeOutput.value = prejudges_range.value ">

In your input handler, in addition to changing the <output> field for the same slider, also change the value of the other slider and the other <output> to 100 - this.value.
$("#judge_range").on("input", function() {
$("#judge_rangeOutput").val(this.value);
$("#prejudges_range").val(100 - this.value);
$("#preJudge_rangeOutput").val(100 - this.value);
});
$("#prejudges_range").on("input", function() {
$("#preJudge_rangeOutput").val(this.value);
$("#judge_range").val(100 - this.value);
$("#judge_rangeOutput").val(100 - this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First input range
<output name="judge_rangeOutput" id="judge_rangeOutput">75</output>
<input type="range" name="judge_range" id="judge_range" min="0" max="100" value="75">
<br/>Second input range
<output name="preJudge_rangeOutput" id="preJudge_rangeOutput">25</output>
<input type="range" name="prejudges_range" id="prejudges_range" min="0" max="100" value="25">

How to pass value of an input range to a variable in JS?

How do you get the value of an input range slider into a variable? Below is the range I'm using. Suppose I drag the range to 12, then I need "12" as the variable that I want to then pass to a function.
<input type="range" min="1" max="30" value="15" />
Edit: I don't want a button to confirm the value or something, I want that everytime the value is changed, it gets passed to the function, so it'll be dynamic!
PS: It may not be the best question out there, but I've honestly tried looking for an answer before posting the question.

You just need to bind to the change event:
<input type="range" min="1" max="30" value="15" />
$("input").change(function(){
var value = $(this).val();
alert(value);
})

If you give an id to your field:
<input id="myRange" type="range" min="1" max="30" value="15" />
then:
$('#myRange').val();
First step it is not really required, but it makes things easier.
You can do this in every form field element:
$('selector').val();
And you will get its value.
UPDATE FOR YOUR QUESTION:
Use .change event to bind a function that make whatever you want to do with this value, for example:
$('#myRange').change(function(){
var myVar = $(this).val();
alert(myVar);
});

Just use register an event on the input:
<input type="range" min="1" max="30" value="15" oninput="alert(this.value)" />
you could of course also call a function in the oninput field.

jsfiddle
<input id="field" type="range" min="1" max="30" value="15" />
var input = document.getElementById('field');
console.info(input.defaultValue); // value default (15)
input.onchange = function () {
console.info(input.value); // value change
};

You can do this simply by adding a listener to the field's input event, updating your variable every time it fires.
var input=document.querySelector("input"),
value=input.value;
console.log(value);
input.addEventListener("input",function(){
value=this.value;
console.log(value);
},0);
<input max="30" min="1" type="range" value="15">

Give the input an Id. Then use
For JQuery
Var a = $('#whateverId').val();
For JavaScript
Var a = getElementById('whateverID).innerHtml;

Local Storage form in HTML5

I'm trying to store numbers into local storage for a type website with a type of shopping cart... I found examples where storing text/email works but when I try to store as numbers instead of text or change the form names it doesn't seem to work.
This is my form I made on the site to capture the data, followed by the javascript that should fill in saved data from another session, capture data, and (currently reset on submit) data.
<form id="localStorageCart" method="post" action="">
<label>Rooster:</label>
<input type="number" name="roosterQ" id="roosterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Cow:</label>
<input type="number" name="cowQ" id="cowQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Cat:</label>
<input type="number" name="catQ" id="catQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Sheep:</label>
<input type="number" name="sheepQ" id="sheepQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Dumpster:</label>
<input type="number" name="dumpsterQ" id="dumpsterQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Dog:</label>
<input type="number" name="dogQ" id="dogQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<label>Horse:</label>
<input type="number" name="horseQ" id="horseQ" class="stored" min="0" max="99" step="1" value ="0" /><br>
<input type="submit" class="submitOrder" value="Submit" />
</form><br>
<br>
<script type="text/javascript">
$(document).ready(function () {
function init() { /* checks for stored data and fills in... */
if (localStorage["roosterQ"]) {
$('#roosterQ').val(localStorage["roosterQ"]);
}
if (localStorage["cowQ"]) {
$('#cowQ').val(localStorage["cowQ"]);
}
if (localStorage["catQ"]) {
$('#catQ').val(localStorage["catQ"]);
}
if (localStorage["sheepQ"]) {
$('#sheepQ').val(localStorage["sheepQ"]);
}
if (localStorage["dumpsterQ"]) {
$('#dumpsterQ').val(localStorage["dumpsterQ"]);
}
if (localStorage["dogQ"]) {
$('#dogQ').val(localStorage["dogQ"]);
}
if (localStorage["horseQ"]) {
$('#horseQ').val(localStorage["horseQ"]);
}
}
init();
});
$('.stored').keyup(function () { /* keyup runs when key is pressed in a form with "stored"... Write to LS */
localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageCart').submit(function() { /* currently resets all LS data*/
localStorage.clear();
});
</script>

localStorage can only hold strings, therefore if you want to store numbers you need to type convert
var num = 1.5, str;
// Number to string, would be done implicitly by localStorage
str = num.toString();
// String to number
num = +str; // note nothing infront of the + sign.
// OR
// num = window.parseFloat(str,10); // or parseInt if you want integers
console.log(num, str);
// 1.5 "1.5"
or change the form names it doesn't seem to work
Are you updating your init, too? To avoid having to do this in the future, it should loop over .stored rather than get each individually by id.

If you still want to do it via localstorage, you might want to check json.stringify before storing the variables
var obj = { 'a': 1, 'b': 2, 'c': 3 };
localStorage.setItem('obj', JSON.stringify(obj));
What do you intent to do anyway? are you just trying to retain the field for next use or reload of page?
if so, you might want to try this plugin, Sisyphus
http://simsalabim.github.com/sisyphus/