Develop Reference

Changing grayscale effect based on ranger/slider

I want the grayscale effect to increase when the ranger value is increased.
function change() {
const img = document.querySelector(".image");
const slider = document.querySelector(".range");
}
<input onchange="change()" type="range" class="range" min="1" max="100" value="1">
<img class="image" src="https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80" alt="">
A bit new to this.
Thanks for your help.

You can set the grayscale as shown below value, and also change the event from onchange to oninput so that it is updated as soon as the slider is moved.
function change() {
const img = document.querySelector(".image");
const slider = document.querySelector(".range");
img.style.filter = `grayscale(${slider.value}%)`
}
<input oninput="change()" type="range" class="range" min="1" max="100" value="1">
<img class="image" src="https://images.unsplash.com/photo-1499195333224-3ce974eecb47?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1248&q=80" alt="">

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>

How do I have 2 range slider that is adjusting 1 image?

The two slider in html format.
<!--Saturation Slider-->
<input id="Hslide" type="range" min="0.0" max="2.0" value="1.0" step="0.01" oninput="showValue(value)" />
<!--Brightness Slider-->
<input id="Vslide" type="range" min="0" max="2" value="1" step="0.1" orient="vertical" oninput="showValue(value)" />
and the scripting,
<script type="text/javascript">
function showValue(slideAmount)
{
var pic = $('.effects').val();
$('#pic').css('-webkit-filter', 'saturate('+slideAmount+')');
$('#range').val(slideAmount);
document.getElementById("Hslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
function showValue(slideAmount1)
{
var pic = $('effects').val();
$('#pic').css('-webkit-filter', 'brightness('+slideAmount1+')');
$('#range').val(slideAmount1);
document.getElementById("Vslide").setAttribute("style","-webkit-filter:saturate(" + value + "%)");
}
</script>
The problem: Whenever I slide and change the saturation AND then change the brightness, the image filter value resets before applying the second filter changes that i made. If there a way to to apply two filter to an image?

Displaying percentages next to HTML5 slider values

I have 6 sliders, each with a respective value from 0-100. I'd love to be able to show each slider percentage (against the total slider sum) to the right of each slider, but I am not sure how to do that.
I am able to grab the slider value to display above, as well as the slider values and sum of the values as JavaScript variables, but I'm not able to...
1) update the percentage values as the sliders are moved (I think I might need to write a separate function that does this, and then call it right after the slider values are displayed?) or
2) display the percentage values (which I rounded to a whole number effectively) just to the right after where the slider value is.
Can anyone clue me in on how to do this? It shouldn't be difficult from a technical standpoint but I have little experience in this arena. I am not using jquery either (as you can tell)... Thanks!
Code:
http://jsbin.com/owIjEXA/7/edit
<!-- Put divs here... trying to set up the display of percentages -->
<div id="val_weight1"></div>
<div id="val_weight2"></div>
<div id="val_weight3"></div>
<div id="val_weight4"></div>
<div id="val_weight5"></div>
<div id="val_weight6"></div>
<!-- form start -->
<form name = "form_weight1" id = "form_weight1" >
<text><b> First Weight </b></text>
<input id="weight1" input type="range" name="weight1" min="0" max="100" value="40" step="1" onchange="showValue(this); " />
<span id="range">40</span>
<text>/ PERCENTAGE%</text>
<script type="text/javascript">
<!-- Original JS bin that modified code: http://jsbin.com/ISekuSiN/5/edit -->
function get_nextsibling(n) {
x=n.nextSibling;
while (x.nodeType!=1) {
x=x.nextSibling; }
return x; }
function showValue(self) {
get_nextsibling(self).innerHTML=self.value; }
</script>
</form>
<form name = "form_weight2" id = "form_weight2" >
<text><b> Second Weight </b></text>
<input id="weight2" input type="range" name="weight2" min="0" max="100" value="10" step="1" onchange="showValue(this); " />
<span id="range">10</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight3" id = "form_weight3" >
<text><b> Third Weight</b></text>
<input id="weight3" input type="range" name="weight3" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight4" id = "form_weight4" >
<text><b> Fourth Weight </b></text>
<input id="weight4" input type="range" name="weight4" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight5" id = "form_weight5" >
<text><b> Fifth Weight </b></text>
<input id="weight5" input type="range" name="weight5" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
<span id="range">5</span>
<text>/ PERCENTAGE%</text>
</form>
<form name = "form_weight6" id = "form_weight6" >
<text><b> Sixth Weight </b></text>
<input id="weight6" input type="range" name="weight6" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
<span id="range">20</span>
<text>/ PERCENTAGE%</text>
</form>
<script type="text/javascript">
var weightfactor1 = parseInt(document.getElementById("weight1").value) ;
var weightfactor2 = parseInt(document.getElementById("weight2").value) ;
var weightfactor3 = parseInt(document.getElementById("weight3").value) ;
var weightfactor4 = parseInt(document.getElementById("weight4").value) ;
var weightfactor5 = parseInt(document.getElementById("weight5").value) ;
var weightfactor6 = parseInt(document.getElementById("weight6").value) ;
var weight_factor_sum = weightfactor1 + weightfactor2 + weightfactor3 + weightfactor4 + weightfactor5 + weightfactor6 ;
document.getElementById('val_weight1').innerHTML = (weightfactor1 / weight_factor_sum)*100;
document.getElementById('val_weight2').innerHTML = (weightfactor2 / weight_factor_sum)*100;
document.getElementById('val_weight3').innerHTML = (weightfactor3 / weight_factor_sum)*100;
document.getElementById('val_weight4').innerHTML = (weightfactor4 / weight_factor_sum)*100;
document.getElementById('val_weight5').innerHTML = (weightfactor5 / weight_factor_sum)*100;
document.getElementById('val_weight6').innerHTML = (weightfactor6 / weight_factor_sum)*100;
</script>

Try this as a starting point:
document.querySelector("#range").addEventListener("change", function(e){
document.querySelector(".range").textContent=e.currentTarget.value;
})
Here is the Fiddle to play with.
When dealing with several sliders, it doesn't make sense to add a change event for each of the sliders, instead use event-delegation (you attach the change-listener to the parent element containing all sliders and dispatch the event yourself).
Here is a Fiddle dealing with more sliders an a sum field.

How to update html5 range on change of a text input?

I have a html5 range input and a text box input. When the range changes, the text box will get updated. But what should I do so that when I put a number in the text box, the range input gets updated?
This is my current code:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var slider = document.getElementById('slider');
$('#box').change(function(){slider.value=parseInt(this.value)});
</script>
When I edit my text box, my slider (range input) does NOT change. What am I doing wrong? Can it be that I shouldn't be using slider.value to update the slider? If that is the reason, what is the correct way to do that?

Hey Everyone Those who don't know , we don't need any js or jquery for this
<form>
<div>
<input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
<input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
</div>
</form>

It's a simple script, just do this:
<label for=range1>Slide, then press "Click to search slider value"</label>
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span>
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/>
<script>
function printValue(sliderID, spanbox) {
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
function slideValue(sliderID, spanbox){
var x = document.getElementById(spanbox);
var y = document.getElementById(sliderID);
y.value = parseInt(x.value);
}
window.onload = function() { printValue('slide1', 'rangeValue1'); }
</script>
(Of course, this only works when you press enter and submit the value to the "onchange")

in my side I did it in just Javascript and adding a onchange event.
I also added the value=0 to range so that make it start at the beguining.
<div>
<input id="slider" type="range" min="0" max="200" value="0"/>
<input id="box" type="text" value="0"/>
</div>
​​​​​​​
var slider = document.getElementById('slider');
var box = document.getElementById("box");
slider.onchange = function(){
box.value = slider.value;
}
And add this if you want to make it work on both side
box.onkeyup = function(){
slider.value = box.value;
} ​

This fiddle works:
var slider = document.getElementById('slider');
$('#box').change(function(){
slider.value=parseInt(this.value);
});
(So that's your current code, actually. Did you import the jQuery library?)
Keep in mind that you've set the slider's range to 200. Try some values between 0 and 200.

It's actually quite easy. It's all written in jQuery Tools API documentation. So I changed my code to this and it worked:
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var sliderapi = $("#slider").data("rangeinput");
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))});
</script>

$('#box').change(function(){
$('#slider').attr({"value":parseInt(this.value)});
});
Might work.