Develop Reference

Sync 2 HTML Inputs Range and Number

Hey I'm want to sync 2 inputs so if someone change the slider then should also change the number input and the other way round I know there are other answered Question but the did not work form me because it is important not to change any class names or ids only the number input sync with the slider but not also the other way round my code is:
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>
my js is
document
.querySelector(".slider")
.addEventListener("input", updateValue);
document
.getElementsByClassName("number")
.addEventListener("input", updateValue);
function updateValue(e) {
var sibling =
e.target.previousElementSibling ||
e.target.nextElementSibling;
sibling.value = e.target.value;
}

You can even shorten the whole thing to:
const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
<input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
<input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>

let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
range.value=e.target.value;
})
For more goto: https://codepen.io/Gangster_sCode/pen/abNKJMm

Is there a reason why any DOMstring element doesnt get stored in a new variable to be processed further?

I am beginner to JS,html and CSS. I am having this trouble of not being able to store a DOM string to a variable to be processed/used further in the code. const inputs = document.querySelectorAll('.controls input');
I am unable to use inputs further in the code.
I have had this problem with other few excercises where I thought my code isn;t right but having checked the syntax, I am unable to figure out whats missing. Please help!
const inputs = document.querySelectorAll('.controls input');
const handleUpdate = function () {
console.log(this.value);//this doesn't show any output at all.
}
inputs.forEach(input => input.addEventListener('change', handleUpdate));
<div class="controls">
<label for="spacing">Spacing:</label>
<input type="range" name="spacing" min="10" max="100" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input type="range" name="blur" value="10" min="10" max="100" data-sizing="px">
<label for="base">Base Color:</label>
<input type="color" name="base" value="#757B1E">
</div>
<img src="images.jpeg" alt="image">

Use jQuery
$('.controls input').each(function (i,value){
console.log($(this).Val());
});

I am trying to get a slider to work and I keep getting outputUpdate is not defined at HTMLInputElement.oninput

I am trying to get a slider to work and I keep getting outputUpdate is not defined at HTMLInputElement.oninput.
My HTML is:
function outputUpdate(mil) {
document.querySelector('#mileage').value = mil;
};
<input type="range" min="1" max="50" value="10" ng-model="miles" step="1" oninput="outputUpdate(value)">
<output for="fader" id="mileage">25</output>
<label for="fader">miles</label>

you could do with this.value oninput="outputUpdate(this.value)"
function outputUpdate(mil) {
document.querySelector('#mileage').value = mil;
};
<input type="range" min="1" max="50" value="10" ng-model="miles" step="1" oninput="outputUpdate(this.value)">
<output for="fader" id="mileage">25</output>
<label for="fader">miles</label>

There is no inherit problem with your code. See this codepen with your html and javascript working as expected: https://codepen.io/anon/pen/vZLRwg
Because of this, the problem is likely that your javascript is not in the correct spot so that it is visible to the <input> tag that is looking for it.

Trying to get a sliderbar to alter a textfield value in HTML

I have a sliderbar that takes input from the textfield and resets its position accordingly; however, I cannot figure out how to do the following:
Make it so that the sliderbar repositions itself for any value within the range, not just non-decimal inputs.
Make it so that the textfield value changes accordingly as the sliderbar is toggled.
The code can be found below.
Any help is appreciated, thank you!
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=parseInt(this.value)
});
</script>

I have a sliderbar that takes input from the textfield and resets its
position accordingly;
I don't see how that work with the code given since you're using parseInt and would need parseFloat for that. Anyway, below is what you asked for:
$('#input').change(function() {
$('#slider').val(parseFloat(this.value))
});
$('#slider').on("input change", function() {
$('#input').val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<input id="slider" type="range" min="0" max="2" step="0.001" />
<input id="input" type="text" value="1" />
</div>

You don't need to use parseInt() since both need to be string.
<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#input').change(function(){
slider.value=this.value
});
</script>

JQuery Range Input Listener

Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:
HTML
html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
And the JS is:
$('#discount_credits').mousewheel( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
I've also tried
$('#discount_credits').change( function() {
alert('it changed!');
alert('new value = ' + $(this).val());
});
Neither seem to work. Am I doing something wrong?

$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
This fires the change event on every input event.

Does not seem to have any problem on HTML5 <input type="range"> using change.
See: http://jsfiddle.net/DerekL/BaEar/33/

I assume your span has an id: <span id="slidernumber">...</span>
Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
</li>
<span id="slidernumber">50</span>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newval=$(this).val();
$("#slidernumber").text(newval);
});
});
http://jsfiddle.net/MahshidZeinaly/CgQ5c/
Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):
<li>
Apply Credits1:
<input type="range" min="0" max="100"
name="discount_credits1" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
<li>
Apply Credits2:
<input type="range" min="0" max="100"
name="discount_credits2" id="discount_credits"
/>
<span id="slidernumber">50</span>
</li>
Try this:
$(document).ready(function(){
$("[type=range]").change(function(){
var newv=$(this).val();
$(this).next().text(newv);
});
});
http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/
<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" />
<span id="newValue" value="0">0</span>
$('#discount_credits').change( function() {
var newValue = this.value;
$('#newValue').html(newValue);
});​
Or you can try something like this:
<form oninput="result.value=parseInt(a.value)">
<input type="range" name="a" value="50" /> =
<output name="result">0</output>
</form>
Using the output example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Several test and bug fixed!
$('input[name=form_range]').change('mousestop',function () {
});