Develop Reference

Prevent style attributes from changing back to default as others are change

This snippet of code changes the brightness and contrast of an image. However, when setting the contrast to 150% for example and then attempting to change the brightness the contrast value defaults back to 100%. How can I prevent these style attributes from changing back to their default value after being changed?
<p>
Contrast Bar
</p>
<input id='contrast_bar' type="range" min="50" max="150" value="100">
<p>
Brightness Bar
</p>
<input id='brightness_bar' type="range" min="50" max="150" value="100">
<BR><BR>
<img id='img_selection' src="photo.jpg">
<script>
let contrast_bar = document.querySelector('[id=contrast_bar]')
let brightness_bar = document.querySelector('[id=brightness_bar]')
let img = document.querySelector('#img_selection')
contrast_bar.addEventListener('input', con_bar => {
img.style.filter = 'contrast(' + con_bar.target.value + '%)'
})
brightness_bar.addEventListener('input', bright_bar => {
img.style.filter = 'brightness(' + bright_bar.target.value + '%)'
})
</script>

The problem is because you overwrite the previous setting of filter when you change each range slider, therefore only ever one filter type is updated.
To fix the problem create a function which reads the values from both range inputs and creates a single string with both brightness and contrast values, and call this function any time either range is changed.
let contrast_bar = document.querySelector('#contrast_bar');
let brightness_bar = document.querySelector('#brightness_bar');
let img = document.querySelector('#img_selection');
let updateFilter = () => img.style.filter = `contrast(${contrast_bar.value}%) brightness(${brightness_bar.value}%)`;
contrast_bar.addEventListener('input', updateFilter);
brightness_bar.addEventListener('input', updateFilter);
img { width: 300px; }
<p>Contrast Bar</p>
<input id="contrast_bar" type="range" min="50" max="150" value="100" />
<p>Brightness Bar</p>
<input id="brightness_bar" type="range" min="50" max="150" value="100" /><br /><br />
<img id="img_selection" src="https://i.imgur.com/WkomVeG.jpg" />

Javascript to move images

I have a script that uses a slider to move an image on its x axis. What I would like to do is use multiple sliders to affect the same image. I have tried duplicating and renaming the move function and slider and it doesn't work:
function move(){
var x = document.getElementById("spin").value;
var image = document.getElementById("test").style;
image.marginLeft=x+"px";
}
<input type="range" name="spin" id="spin" step="1" value="0" min="0" max="500" oninput="move()" style="width:100;"/>
<div id="test"><h3>Image</h3></div>
Thoughts? I have also considered dropping the sliders and using input text fields to control the x axis of the image.
Thanks for your input.

You never specify what didn't worked, but what you provided seams to be fine, you just need to rename it to prevent variable collision between your two function. ( id, variable names, etc )
function movex1(){
var x = document.getElementById("spinx").value;
var image = document.getElementById("test").style;
image.marginLeft=x+"px";
}
function movex2(){
var x = document.getElementById("spiny").value;
var image = document.getElementById("test").style;
let currentMargin = parseInt(image.marginLeft.replace('px', ''));
image.marginLeft= (currentMargin + parseInt(x)) + "px";
}
<input type="range" name="spinx" id="spinx" step="1" value="0" min="0" max="500" oninput="movex1()" style="width:100;"/>
<input type="range" name="spiny" id="spiny" step="1" value="0" min="0" max="500" oninput="movex2()" style="width:100;"/>
<div id="test"><h3>Image</h3></div>

Jquery Range Slider with Image Swap

I'm trying to create a range slider that can swap to different images when the user drags the slider. I created a range slider, but i do not know how to take the value of the slider, and then show the corresponding image for the value selected.
Here is a visual example of my goal.
<input type="range" min="0" max="9" value="0" step="1" onChange="sliderChange(this.value)" />
<br /><br />
slider value = <span id="sliderStatus">0</span>
Any help would be appreciated on how to achieve this.
Codepen Link
Thank You

var imageUrl = new Array();
imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';
imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';
imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
$(document).on('input change', '#slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html( $(this).val() );
$("#img").prop("src", imageUrl[v]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img'/>
slider value = <span id="sliderStatus">0</span>
Hope it helps you out.

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.