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 Scale image and Transfom image position veritcally, horizontally

I want to transform the image vertically, horizontally and also scale the image using javascript. At the moment I manage to get the resize image to work but it doesn't look right. I am trying to have something similar to Transform image. when the move vertical bar is adjusted the image should move up and down and when the move horizontal is adjusted the image should move horizontally. At the moment the testresize() function is working with resizing the image but it doesn't look like what I want. I want to apply a CSS transform property containing translateX(), translateY() and scale() transforms to each of the image. Range Slider
<div id="toggle-components">
<fieldset>
<legend>Choose image to display</legend>
<input type="checkbox" id="mage1" onclick="if(this.checked){displayimg()}")><label for="image1">diving</label>
<input type="checkbox" id="mage2" onclick="if(this.checked){displaybgimage()}")><label for="image2">jumping</label>
</div>
<div id="container">
<img id="dolphin1" class="image" src="../images/img/image1.png" >
<img id="dolphin2" class="image" src="../images/img/image2.png" >
</div>
<div id="adjust-components">
<fieldset>
<legend>Adjust image</legend>
<label for="vertical-control">move vertical:</label>
<input id="vertical-control" type="range" min="-100" max="100" value="0"><br>
<label for="size-control">resizesize:</label>
<input id="size-control" type="range" min="-100" max="100" value="0" onChange="testresize(this.value)"><br>
<label for="horizontal-control">move horizontal:</label>
<input id="horizontal-control" type="range" min="-100" max="100" value="0"><br>
</fieldset>
</div>
var gettestimage=document.getElementsByClassName("image");
//resize image
function testresize(val){
for(var i=0;i<gettestimage.length;i++){
var chek1 = document.getElementById("image1");
var chek2 = document.getElementById("image2");
if(chek1.checked){
gettestimage[0].style.width=5*(val / 1)+'px';
console.log(val)
}else if(chek2.checked){
gettestimage[1].style.width=5*(val / 1)+'px';
}

If you want to set the transform css property then why are you setting width and height to scale the image? The solution is actually quite simple, I just had to to use the tansform property instead. This solution only works with a single image but I am sure you can manage to make it work with multiple.
var image = document.getElementById("image1")
//The transformation (scale, translation, rotation) of the image
var transform = {
translation: {
x: 0,
y: 0
},
scale: 1
};
function scaleImage(val){
transform.scale = val;
applyStyle()
}
function translateImage(axis, val){
transform.translation[axis] = val;
applyStyle()
}
function applyStyle() {
image.style.transform = `scale(${transform.scale}) translate(${transform.translation.x}px, ${transform.translation.y}px)`
}
<div id="container">
<img id="image1" class="image" src="https://www.w3schools.com/w3css/img_lights.jpg" width="500">
</div>
<div id="adjust-components">
<fieldset>
<legend>Adjust image</legend>
<label for="vertical-control">move vertical:</label>
<input id="vertical-control" type="range" min="-100" max="100" value="0" onchange="translateImage('y', this.value)"><br>
<label for="size-control">scale:</label>
<input id="size-control" type="range" min="0" max="2" value="1" step="0.1" onchange="scaleImage(this.value)"><br>
<label for="horizontal-control">move horizontal:</label>
<input id="horizontal-control" type="range" min="-100" max="100" value="0" onchange="translateImage('x', this.value)"><br>
</fieldset>
</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.

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?

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.