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">
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 code that looks something like below. When I hit the reset button, I want my paragraph element to update to the default slider values, but they stay at the same value from before the reset. How can I make it so that the paragraph element reflects the reset slider value?
JSFiddle Link: https://jsfiddle.net/apshah/f6ymkcLe/
HTML:
<div class ='slidercontainer' id='slidercontainer'>
<form action method="POST" class="sliderform" id="sliderform">
<div class = "divslider" id="slider1">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange1">
<p>
<span class="sVal" id="val1">50</span>
</p>
</div>
<div class = "divslider" id="slider2">
<input type="range" min="1" max="10" value="5" class="slider" id="myRange2">
<p>
<span class="sVal" id="val2">5</span>
</p>
</div>
</form>
<div class="space1"></div>
<div class='buttonbox'>
<button type="submit" form="sliderform" class="sliderbutton" id="accept">Accept</button>
<button type="reset" form="sliderform" class="sliderbutton" id="reset">Reset</button>
<div class="space2"></div>
</div>
</div>
JavaScript:
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
You should add another listener for this. I used setTimeout because of async.
document.body.onload = function(){
runSlider("myRange1", 'val1')
runSlider('myRange2', 'val2')
registerFormEvent()
}
function registerFormEvent() {
const formEl = document.querySelector(".sliderform");
const onFormReset = function(){
setTimeout(() => {
document.querySelector("#val1").innerHTML = document.querySelector("#myRange1").value;
document.querySelector("#val2").innerHTML = document.querySelector("#myRange2").value;
}, 0)
}
formEl.addEventListener("reset", onFormReset)
}
function runSlider(inputID, pID){
var slider = document.getElementById(inputID);
var output = document.getElementById(pID);
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
}
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" />
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!
How do I combine outputs of the two functions to do some operations on the two values?
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
</div>
</div>
And the JS is:
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
function xLevel(newVal) {
xout.innerHTML = newVal;
}
function yLevel(newVal) {
yout.innerHTML = newVal;
}
So how do I combine the two values, x and y, to eg. multiply them and display them in yet another div?
Thanks
Store the new values in their own variables in the top-level scope, and then manipulate them in a separate function.
var output = document.getElementById("output");
var xout = document.getElementById("x");
var yout = document.getElementById("y");
var multout = document.getElementById('mult');
var xval;
var yval;
function xLevel(newVal) {
xout.innerHTML = newVal;
xval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function yLevel(newVal) {
yout.innerHTML = newVal;
yval = parseInt(newVal, 10); // casts it to a number
updateMultiplier();
}
function updateMultiplier() {
multout.innerHTML = yval * xval;
}
and then for your markup:
<div class="grid">
<h2>Adjust the level</h2>
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="xLevel(this.value)">
<input
type="range"
name="points"
min="0"
max="10"
step="1"
onChange="yLevel(this.value)">
<div id="output">
<p id="x"></p>
<p id="y"></p>
<p id="mult"></p>
</div>
</div>