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" />
Related
Image of my Pass Generator
If I move the pointer to the right or left the Value "00" doesn't do anything. It doesn't increase and decrease.
Hope for some help.
I've tried it with
const updateSlider = () => {
document.querySelector(".pass-length span").innerText = lengthSlider.value;
generatePassword();
updatePassIndicator();
}
updateSlider();
but it doesn't work.
This should update the label. I dont have your code, so I cant fit it to your case but making it work for you should not be too hard.
const slider = document.getElementById("slider");
const sliderValue = document.getElementById("slider-value");
slider.addEventListener("input", (e) => {
sliderValue.innerHTML = e.target.value;
});
<input type="range" min="1" max="30" default="15" step="1" id="slider">
<p id="slider-value">Slider Value: 00</p>
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>
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?
I’m trying to figure out how to store JavaScript slider values as variables, to use later on for d3.js.
In the head of my html doc I have 6 sliders, each which displays 0-100 value.
I want to assign the slider values as variables – one variable for each slider. At each point in time, of course, each slider will only have one value.
But the idea is that I can change the slider position to change the slider value, and then hit an update button and then the newer slider values will become the new variable values.
I’ve tried a variety of different naming methods but none seems to be the right syntax.
What I am caught up on, is how to refer to the (slider) form by id or name or input id, which is html, when I create JavaScript variables for the values that are selected using the sliders.
Any ideas on how I can get this to work?
I searched online and could not readily find a solution on how to do this, or even a template to go off of. Any suggestions are welcome. Thanks!
Code is posted below (I took away my non-working attempts and replaced with hard coded values as an example for what slider positions could look like):
<p>
<form name = "weight1" id = "weight1" >
<text><b> weight1 </b></text> <input id="weight1" input type="range" name="weight1" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
<script type="text/javascript">
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 = "weight2" id = "weight2" >
<text><b> weight2 </b></text> <input id="weight2" input type="range" name="weight2" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight3" id = "weight3" >
<text><b> weight3 </b></text> <input id="weight3" input type="range" name="weight3" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight4" id = "weight4" >
<text><b> weight4 </b></text> <input id="weight4" input type="range" name="weight4" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight5" id = "weight5" >
<text><b> weight5 </b></text> <input id="weight5" input type="range" name="weight5" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
<form name = "weight6" id = "weight6" >
<text><b> weight6 </b></text> <input id="weight6" input type="range" name="weight6" min="0" max="100" value="0" step="1" onchange="showValue(this)" />
<span id="range">0</span>
</form>
</p>
<script type="text/javascript">
//put JavaScript function that makes each slider a variable, or just assign slider values directly to variables if easier...then use in body
var weightfactor1 = 0 ; //want this variable to be the form output value instead of hard coded values between 0-100 ...so weight1 slider
var weightfactor2 = 100 ; //want this variable to be weight2 slider value
var weightfactor3 = 10 ; //want this variable to be weight3 slider value
var weightfactor4 = 100 ; // " "" weight4
var weightfactor5 = 12 ; // " "" weight5
var weightfactor6 = 100 ; // " "" weight6
</script>
See: http://jsbin.com/ISekuSiN/5 for an example of the working sliders (solution that was provided to a prior question I had about this, Displaying values from multiple JavaScript slider values )
Couple of suggestions:
Make sure your html has been rendered before running your JavaScript
For the case above case you can use the document object as follows:
var weightFactor1 = document.getElementById("weight1").value;
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.