I have a Javascript slider bar which uses an array for the options. However, It does not change as you drag.
var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj) {
var value = obj.value;
img.src = img_array[value];
}
<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />
can anyone give me some guidance on how to change the image while I am dragging the slider, rather than when I let go of the mouse button
Use oninput instead of onchange
(Get value of slider while it's being moved?)
var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj) {
var value = obj.value;
img.src = img_array[value];
}
<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input oninput='setImage(this)' type="range" min="0" max="1" value="0" step="1" />
Related
this is the small part code which i have write but its not working and img is the variable which i have store img ID in it
let filtercn=document.querySelectorAll('input[type=range]');
<div >
<span>Blur</span>
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px"><br>
</div>
function applyFilter(){
let fl='';
filtercn.forEach(function(s){
fl+=s.getAttribute('data-filter')+'('+s.value+s.getAttribute('data-scale') +')';
});
img.style.filter=fl;
};
Editing on Riccardo LV's Answer without putting it in a different css file just do the following,
function applyFilter(img){
img.css.filter = "blur(10px)";
}
Not exacly what you asked, but I'd do it via CSS:
filter: blur(10px);
EDIT
You can also do something like this (jQuery or JS are either ok of course):
onchange="$(this).css('filter','blur(10px)');"
Your code is not wrong;
This is what you have used, just a bit cleaner and it does work :)
let filtercn = document.querySelectorAll('input[type=range]');
let img = document.querySelectorAll('img')[0];
function applyFilter() {
let fl = '';
filtercn.forEach(function(s) {
fl += s.getAttribute('data-filter') + '(' + s.value + s.getAttribute('data-scale') + ')';
});
img.style.filter = fl;
};
<div>
<span>Blur</span>
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()" data-filter="blur" data-scale="px">
<img src="https://lh3.googleusercontent.com/a-/AOh14Gghf3M5ETbqkndUt57cgaUALuAW2cJ_o-O7r4H7=k-s64">
</div>
There is no image in your code. so added an image and made the function more simple.
function applyFilter() {
let image = document.getElementById("image");
let blurVal = document.getElementById("blur").value;
image.style.filter = "blur("+blurVal+"px)"
}
#image {
width: 300px;
}
<div >
<span>Blur</span>
<img id="image" src="https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_960_720.jpg" alt="">
<input id="blur" type="range" min="0" max="100" value="0" onchange="applyFilter()"><br>
</div>
I have this bit of code and I was wondering if it is possible to change the size of the image just by moving the slider:
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
Can anyone help pls?
You can add an eventListener to the range and then apply your logic there to change the dimension of the image.
const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);
function handleChange(e) {
const img = document.getElementById("Elon");
const {value, max} = e.target;
img.style.width = `${value*max}px`;
img.style.height = `${value*max}px`;
}
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
Something like:
document.getElementById("Slider").addEventlistener("change", (value) => {
let image = document.getElementById("Elon");
image.style.width = value;
image.style.height = value;
});
Notice, this is just a sketch and will prob not work if u just copy and paste it.
Change img width on slider change. Something like below
const sliderElem = document.getElementById('Slider');
const imageElem = document.getElementById('image');
function sliderChange() {
const width = image.getAttribute('width');
image.setAttribute("width", Number(width) + Number(sliderElem.value));
}
<div class="slidecontainer">
<input onChange="sliderChange()" type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img id="image" width="150" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
You need to use some javascript for this
Here is the code you can run and see it.
If you want more zoom then instead of x*10 write 20 or 30 according to your choice.
document.getElementById("Slider").oninput = function changeImageSize(){
var x = document.getElementById("Slider").value;
document.getElementById("Elon").style.height=String(x*10) + "px";
}
<div class="slidecontainer">
<input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">
im working on a slider in html, that will show different images depending on the slider value.
so if the slider is set to value 1, image1.jpg is shown, value 2 will show image2.jpg and so on.
I have found the slider part on w3schools and has managed to output new images to it. link to w3schools slider
But i dont know how to refresh the images, for now the code just prints a new one by the olds images side. i++
does anyone know how to refresh image, instead of printing a one new every time.
Any help would be appreciated!
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var x = document.createElement("IMG");
x.setAttribute("src", "image" + this.value + ".jpg");
document.body.appendChild(x);
}
<div class="slidecontainer">
<input type="range" min="1" max="2" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
</div>
You can just use the img element with the default image or src value:
var slider = document.getElementById("myRange");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
var img = document.getElementById("img");
img.setAttribute("src", "https://loremflickr.com/320/240/" + this.value);
}
<div class="slidecontainer">
<input type="range" min="1" max="5" value="1" class="slider" id="myRange">
<p>Value: <span id="value"></span></p>
<img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>
I'm a complete newbie to Javascript, I have taken a demo html slider and everything is working OK;
var slider = document.getElementById("myRange");
var output = document.getElementById("first");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
<p>
Size: <span id="first"></span>mm
</p>
</div>
I now want to generate a second value from the slider value, this value will be dependant on the selected value - so not a second slider handle - I want to perform a simple multiplication from a variable and output that to a second span ID like this;
Size: <span id="first"></span>mm x <span id="second">mm</span>
I've been able to create a second output by duplicating the getElementByID by creating new variables and span IDs, I just cannot work out how to perform a multiplication on the initial slider value and create a new value (variable) with the answer and output it.
I hope all that makes sense and thanks in advance for any help provided!
The HTML5 range input only accepts one input!
You can use something like the jQuery UI range slider for that task.
In this way you can understand exactly how it works since you are a junior, but it is certainly not the more optimised way!
var slider = document.getElementById("myRange");
var first = document.getElementById("first");
var second = document.getElementById("second");
first.innerHTML = slider.value;
second.innerHTML = slider.value * 2;
slider.oninput = function() {
first.innerHTML = this.value;
second.innerHTML = this.value * 2;
}
<div class="slidecontainer">
<input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
<p>
Size: <span id="first"></span>mm * <span id="second"></span>mm
</p>
</div>
I came up with this:
<input type="range" name="range" min="50" max="100" id="range" /><br>
<span id="first"></span> x <span id="second"></span>
<script type="text/javascript">
var r = document.getElementById('range');
var first = document.getElementById('first');
var sec = document.getElementById('second');
flag = true;
r.oninput = function(){
first.innerHTML = this.value;
second.innerHTML = this.value;
}
</script>
Then I guess you would just need this
I'm currently working on a Image editor and I have it inside of a Canvas, and It's changing the picture that is inside of the Canvas, but when you go to right click and save the image as, it comes out as the original image still not the edited one, I also had this problem even when It wasn't inside of the Canvas.
Here's What it looks Like Edited in the Canvas:
Edited Image
And What it Looks Like After You save it: Saved Image
Here's My Filters Code:
<script type="text/javascript">
$(document).ready(function()
{
$(".range").change(add_filter).mousemove(add_filter);
});
function add_filter()
{
var grayscale_val=$("#grayscale").val();
var blur_val=$("#blur").val();
var exposure_val=$("#exposure").val();
var sepia_val=$("#sepia").val();
var opacity_val=$("#opacity").val();
$("#canvas").css("-webkit-filter","grayscale("+grayscale_val+"%) blur("+blur_val+"px) brightness("+exposure_val+"%) sepia("+sepia_val+"%) opacity("+opacity_val+"%)");
}
</script>
Here's my HTML :
<div id="buttons">
<li>GrayScale<br><input id="grayscale" class="range" type="range" min="0" max="100" value="0"></li>
<li>Blur<br><input id="blur" class="range" type="range" min="0" max="10" value="0"></li>
<li>Exposure<br><input id="exposure" class="range" type="range" min="0" max="200" value="100"></li>
<li>Sepia<br><input id="sepia" class="range" type="range" min="0" max="100" value="0"></li>
<li>Opacity<br><input id="opacity" class="range" type="range" min="0" max="100" value="100"></li>
<div id="image_div">
<canvas id="canvas" id="edit_image" height="600" width="600" ></canvas>
<input type='file' name='img' id='uploadimage' />
</div>
Code That Will upload the selected Image into the Canvas:
function draw(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", draw, false)
</script>
Thank You In Advance!