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>
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 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">
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 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