We Keep Coding

How to change image size with slider?

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

Create a second value from html range slider

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

More efficient way of duplicating the code

Every time I click the + button I want the same input to display
The way I do it here works fine but seems like the worst way of doing it as just repeating the same code and changing the id's (also if I want for example 5 inputs I would have to repeat this code 5 times). What would be a better way of doing this?
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>
<html>
<head>
<script language='JavaScript' type='text/javascript'>
function show3(){
document.getElementById('div2').style.display = 'block';
}
</script>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider2" id="one"/>
<p>Value(mm): <input type="text" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider1 = document.getElementById("one");
var output2 = document.getElementById("two");
output2.value = slider1.value;
slider1.oninput = function() {
output2.value = this.value;
}
</script>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider2" id="three"/>
<p>Value(mm): <input type="text" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<script>
var slider2 = document.getElementById("three");
var output3 = document.getElementById("four");
output2.value = slider1.value;
slider2.oninput = function() {
output3.value = this.value;
}
</script>
</body>
</html>

This will work for all the sliders. But you need to keep in mind a couple of things :
This will work only for the sliders that are already rendered in the DOM (even if they are hidden) if you render new sliders to the DOM you will need to attach the event listener as I did it in the foreach loop.
The input id (e.g "one") needs to match the output data-range="one"
function show3(){
document.getElementById('div2').style.display = 'block';
}
var sliders = document.querySelectorAll(".slider"); // slider = common class name
sliders.forEach(( slider ) => {
slider.addEventListener('input', (e) => {
const sliderId = e.target.id;
const output = document.querySelector(`[data-range=${sliderId}]`);
output.value = e.target.value;
});
});
<html>
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div>
<input type="range" min="0" max="1500" value="0" class="slider" id="one"/>
<p>Value(mm): <input type="text" data-range="one" id="two" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
<div id="div2" class="hide">
<input type="range" min="0" max="1500" value="0" class="slider" id="two"/>
<p>Value(mm): <input type="text" data-range="two" id="four" size="10" class="special" /></p>
<button onclick="show3();" type="button">+</button>
</div>
</body>
</html>

Might be easier to include the code in the element and clone it (parentNode is the div) :
<div>
<input type="range" min="0" max="1500" value="0"
oninput="this.parentNode.getElementsByTagName('INPUT')[1].value = this.value"/>
<p>Value(mm): <input type="text" size="10" /></p>
<button type="button"
onclick="this.parentNode.parentNode.append(this.parentNode.cloneNode(true))">+</button>
</div>

I would recommend you to create some kind of class which let you create slider components dynamically.
Here's a quick example (not optimized):
var SliderComponent = (function(doc) {
var defaults = {
containerSelector: 'body',
value: 0,
min: 0,
max: 1500,
inputSize: 10,
inputClass: 'special',
sliderClass: 'slider',
buttonClass: 'button'
}, options;
function SliderComponent(options) {
options = Object.assign({}, defaults, options || {});
this.container = getContainer(options);
this.input = createInput(options);
this.slider = createSlider(options);
this.removeButton = createButton(options.buttonClass, '-');
this.addButton = createButton(options.buttonClass, '+');
this.element = render.apply(this);
this.events = [];
this.events.push(
addEventListener.call(this, 'click', this.removeButton, function() {
this.destroy();
}),
addEventListener.call(this, 'click', this.addButton, function() {
new SliderComponent(options);
}),
addEventListener.call(this, 'input', this.slider, function(event) {
this.input.value = event.target.value;
}),
addEventListener.call(this, 'input', this.input, function(event) {
this.slider.value = event.target.value;
})
)
}
SliderComponent.prototype.destroy = function() {
this.events.forEach(function(e) {
e();
});
this.element.remove();
}
function addEventListener(name, element, listener) {
listener = listener.bind(this);
element.addEventListener(name, listener);
return function() {
element.removeEventListener(name, listener);
};
}
function getContainer(options) {
var container = doc.querySelector(options.containerSelector);
if(!container) {
throw new Error('Container for selector %s not found', options.containerSelector);
}
return container;
}
function createInput(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.setAttribute('size', options.inputSize);
input.classList.add(options.inputClass);
input.value = options.value;
return input;
}
function createSlider(options) {
var input = doc.createElement('input');
input.setAttribute('type', 'range');
input.setAttribute('min', options.min);
input.setAttribute('max', options.max);
input.classList.add(options.sliderClass);
input.value = options.value;
return input;
}
function createButton(klass, text) {
var button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add(klass);
button.textContent = text;
return button;
}
function render() {
var element = doc.createElement('div');
element.appendChild(this.slider);
element.appendChild(this.input);
element.appendChild(this.removeButton);
element.appendChild(this.addButton);
return this.container.appendChild(element);
}
return SliderComponent;
})(document);
var sliders = new SliderComponent();

Shortening repeating functions

I am trying to make the sliders output the values depending on the which button has been clicked.
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function1()" value="1">
<input type="button" onclick="function2()" value="2">
<input type="button" onclick="function3()" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function function1() {
var a = 'test1'
console.log('test: ' + a +' '+ slider.value);
}
function function2() {
var a = 'test2'
console.log('test: ' + a +' '+ slider.value);
}
function function3() {
var a = 'test3'
console.log('test: ' + a +' '+ slider.value);
}
</script>
</script>
</body>
</html>
As you can see for each of the buttons, the functions are being repeated and only the variable 'a' is being changed. I was wondering if there was a way to make this code more efficient, in other words shorter.
Please let me know if you have any solutions for this.
Thanks.

Well you could inspect the element that triggered the event to get it's associated value like this and to be consistant with yoru slider you can bind to all inputs with a special class like this:
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var buttons = document.getElementsByClassName('button');
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
for(var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.onclick = function() {
var a = 'test'+this.value;
console.log('test: ' + a +' '+ slider.value);
}
}
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">

There is no need to define the same variable again and again and multiple functions to perform the same task.
Use:
<input type="button" onclick="some_function('test1')" value="1">
<input type="button" onclick="some_function('test2')" value="2">
<input type="button" onclick="some_function('test3')" value="3">
to use the same function.
function some_function(a) {
console.log('test: ' + a +' '+ slider.value);
}
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="function_name('test1')" value="1">
<input type="button" onclick="function_name('test2')" value="2">
<input type="button" onclick="function_name('test3')" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function function_name(a) {
console.log('test: ' + a +' '+ slider.value);
}
</script>
</body>
</html>

let slider = document.getElementById('myRange');
let output = document.getElementById('output');
let setOutputHTML = function (value) {
output.innerHTML = value;
};
let setSliderValue = function (e) {
slider.value = e.currentTarget.value;
slider.dispatchEvent(new Event('input'));
};
slider.addEventListener('input', function (e) {
setOutputHTML(e.currentTarget.value);
});
setOutputHTML(slider.value);
Array.from(document.querySelectorAll('[type="button"]'))
.forEach(function (input) {
input.addEventListener('click', setSliderValue);
});
<div>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="output"></span></p>
</div>
<input type="button" value="25" name="field_slug" />
<input type="button" value="50" name="field_dlug" />
<input type="button" value="75" name="field_flug" />

Basically, just pass this to the function and since the value indicated on the button is what is different for each button, we just concatenate that to 'test' and pass that to the string.
<!DOCTYPE html>
<html>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<input type="button" onclick="setSliderValue(this)" value="1">
<input type="button" onclick="setSliderValue(this)" value="2">
<input type="button" onclick="setSliderValue(this)" value="3">
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
function setSliderValue(button) {
var value = button.value
var testType = 'test' + value;
console.log('test: ' + testType +' '+ slider.value);
}
</script>
</body>
</html>

Get average value from multiple input fields(range)

I have been searching for a solution for days, i am an beginner in javascript.
This is the form i use to input value via sliders.
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage1"></div>
<div class="formSlider" id="formSlider1">
<input class="slider" name="cat_pk" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field1(this.value)"/>
</div>
<div class="formMark"><p id="formMark1" class="mark">1</p></div>
</div>
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage2"></div>
<div class="formSlider" id="formSlider2">
<input class="slider" name="cat_service" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field2(this.value)"/>
</div>
<div class="formMark"><p id="formMark2" class="mark">1</p></div>
</div>
<div class="formSliderField" style="display:block">
<div class="formIcons" id="formSliderImage3"></div>
<div class="formSlider" id="formSlider3">
<input class="slider" name="cat_prijs" type="range" min="0" max="10" step="0.5" width="290px" value="0" onchange="field3(this.value)"/>
</div>
<div class="formMark"><p id="formMark3" class="mark">1</p></div>
</div>
<div class="formSubmitWrapper">
<div id="formSubmitButton">
<input id="formRecensieSubmit" type="submit" value="Bevestigen"/>
</div>
</div>
I need the input value from these sliders to get an average for further use. This needs to be as dynamic as possible, not after i submit this form.
You can see i use onchange, this is already used in a function to display the input values per slider.
Hope someone can help me with this.

JavaScript :
window.onload = function(){
var elements=document.querySelectorAll('input[type=range]')
for(var i = 0; i < elements.length; i++){
elements[i].addEventListener('change',calcul , false);
}
}
function calcul(){
var elements = document.querySelectorAll('input[type="range"]')
var len = 0
var buf = 0
for(var i=0;i<elements.length;i++) {
if(elements[i].parentNode.parentNode.style.display != 'none'){
buf += parseInt(elements[i].value)
len++
}
}
buf = len === 0 ? 0 : buf/len
console.log(buf)
}
CodeOpen

Maybe you're trying to achieve something like this?
(function (win, doc, undefined) {
"use strict";
var myForm = doc.getElementById("myForm"),
sliders = myForm.getElementsByClassName("slider"),
marks = myForm.getElementsByClassName("mark");
myForm.addEventListener("change", changeHandler);
function changeHandler(e) {
var t = e.target,
i = -1,
sum = 0,
avg = 0;
if (t.nodeName.toLowerCase() === "input" && t.type.toLowerCase() === "range") {
i = [].indexOf.call(sliders, t);
marks[i].innerHTML = t.value;
[].forEach.call(sliders, function (val) {
sum += parseFloat(val.value);
});
avg = parseFloat((sum / sliders.length).toFixed(1));
}
console.log(avg);
}
}(window, window.document));
Look at Demonstration